Basic Horizontal & Vertical Image Slider For jQuery - My Slider
File Size: | 3.93 MB |
---|---|
Views Total: | 11010 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A basic and customizable jQuery slider plugin which enables you to vertically or horizontally slide a couple of images with a simple dots navigation.
More features:
- Auto sliding on page loaded.
- Custom sliding speed and duration.
- 4 direction options: left, right, up or down.
- Carousel style endless looping.
How to use it:
1. Insert several images into your webpage. The markup structure should be like this.
<div id="slider-holder"> <div class="slide"> <img src="images/universe_1.jpg" width="800" height="500" alt=""> </div> <div class="slide"> <img src="images/universe_2.jpg" width="800" height="500" alt=""> </div> <div class="slide"> <img src="images/universe_3.jpg" width="800" height="500" alt=""> </div> ... <div id="btn-nav-holder"> <img src="images/bn-slide-on.png" width="8" height="8" alt=""> <img src="images/bn-slide-off.png" width="8" height="8" alt=""> <img src="images/bn-slide-off.png" width="8" height="8" alt=""> ... </div> </div>
2. The sample CSS for the image slider. Feel free to change or override the styles below to meet your business needs.
#slider-holder { position: relative; margin: 0 auto; width: 100%; max-width: 800px; height: 100%; max-height: 500px; overflow: hidden; } #slider-holder .slide { display: none; position: absolute; float: left; width: 100%; height: auto; max-height: 500px; font-size: 0px; } .slide .slide-img { position: relative; margin: 0; width: 100%; min-width: 320px; max-width: 800px; height: auto; max-height: 500px; } #slider-holder #btn-nav-holder { z-index: 20; position: absolute; bottom: 20px; left: 20px; }
3. Include the necessary jQuery library and the jQuery my slider plugin at the bottom of your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/my-slider-1.0.0.js"></script>
4. Setup the image slider at the end of the my-slider-1.0.0.js
. Params : g(Slide Holder), w(Slide), m(Slide Button Holder), n(Sliding Speed), p(horizontal or vertical), q(Timer Duration), f(left or right or up or down).
("slider-holder", "slide", "btn-nav-holder", 1E3, "horizontal", 4E3, "left");
This awesome jQuery plugin is developed by oikonomos. For more Advanced Usages, please check the demo page or visit the official website.