Responsive & Touch-Enabled jQuery Carousel/Slideshow Plugin - Slides

Slides is a lightweight jQuery plugin to create a responsive, flexible, mobile friendly carousel/slideshow with thumbnails, arrows/dots navigation and custom controllers.

How to use it:

1. Load the required slides.css into the document head.

<link href="css/slides.css" rel="stylesheet">

2. Load the jQuery library and the jQuery slides.js script at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/slides.min.js"></script> 

3. Include the custom build of jQuery Mobile for touch swipe functions.

<script src="js/jquery.mobile.custom.min.js"></script>

4. Add the links pointing to the large images to your thumbnails and then wrap them into a container as follows. The plugin will auto generate bottom image captions from the title attribute of your images. In addition, you can use data-path to specify an URL for each caption.

<div class="demo">
  <div class="slide_imgs">
    <a href="large-1.jpg"><img alt="" data-path="#" src="thumb-1.jpg" title="Image Caption 1"></a> 
    <a href="large-2.jpg"><img alt="" data-path="#" src="thumb-2.jpg" title="Image Caption 2"></a> 
    <a href="large-3.jpg"><img alt="" data-path="#" src="thumb-3.jpg" title="Image Caption 3"></a> 
    <a href="large-4.jpg"><img alt="" data-path="#" src="thumb-4.jpg" title="Image Caption 4"></a> 
    <a href="large-5.jpg"><img alt="" data-path="#" src="thumb-5.jpg" title="Image Caption 5"></a> 
  </div>
</div>

5. Call the function to initialize the carousel/slideshow.

$(".demo").slides({
thumbs: "on", 
controller:"on"
});

6. All the options.

$(".demo").slides({

// enable/disable thumbnaisl
thumbs: "off",

// enable/disable image captions
slide_title: "on",

// enable/disable dots navigation
markers: "on",

// enable/disable controllers
// which allow to play, pause and stop a carousel
controller: "off",

// enable/disable full width mode
full_width_image: "off"

});

Change log:

2014-10-25

• Slides 0.0.4.1

---

This awesome jQuery plugin is developed by jeffreypoland. For more Advanced Usages, please check the demo page or visit the official website.