Simple Background Image Rotator/Carousel Plugin - SSlide
File Size: | 1.54 MB |
---|---|
Views Total: | 2937 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SSlide is a simple jQuery image rotator/carousel plugin which allows you to slide through a series of background images defined in a data array.
Features:
- Fast, easy to implement.
- Custom carousel height/width.
- Auto play on load w/ pause on hover
- Optional Infinite loop.
- Arrows navigation on hover.
- Bottom dots pagination.
How to use it:
1. Include jQuery library and the jQuery SSlide plugin in your web page.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/sslide.js"></script> <link rel="stylesheet" href="css/sslide.css">
2. The Html structure for the image rotator/carousel with navigation controls.
<div id="demo" class="pic_container"> <ul class="pic_box size_box"> </ul> <span class="btnl btns"></span> <span class="btnr btns"></span> <div class="dots"></div> </div>
3. Insert your images into the carousel using JS data array as follow.
var myCarousel = { "lbId": "demo", "picWidth": 400, "picHeight": 300, "picPath": ["1.png","2.png","3.png"] };
4. Initialize the plugin.
SSlide(myCarousel);
5. Configurations.
//image width "picWidth": 600, //image height "picHeight": 400, //Selector ID "lbId": "", //the number of images "picNum": 5, //image path array "picPath": [], //left/right arrows "switchBtnShow": true, //dots navigation "switchDotShow": true, //pause on hover "pause": true, //auto play "autoSlide": true, //slide delay time in ms "interTime": 3500, //infinite loop "loop": true
This awesome jQuery plugin is developed by sdhhqb. For more Advanced Usages, please check the demo page or visit the official website.