Simple Background Image Rotator/Carousel Plugin - SSlide

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

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.