Responsive jQuery Image Slider / Slideshow Plugin - Dslider

Dslider is a lightweight, easy-to-use, responsive jQuery carousel plugin which lets you create image sliders and / or slideshows for both mobile and desktop webpages.

Features:

• Fade or slide animations.
• Supports both horizontal and vertical sliding.
• Autoplay.
• Allows to specify the initial image.
• Image caption bar.
• Cross-browser and cross platform.
• Supports any images with various sizes and aspect ratios.

How to use it:

1. Include the core style sheet DSlider.css in the document's head section.

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

2. Create an html list and insert your images into li elements. Use the data-title attribute to define the caption text for each image.

<ul class="Slider Slider-demo">
  <li class="DSlider-item" data-title="11111"><img src="1.jpg" alt="11111"/></li>
  <li class="DSlider-item" data-title="22222"><img src="2.jpg" alt="22222"/></li>
  <li class="DSlider-item" data-title="33333"><img src="3.jpg" alt="33333"/></li>
  <li class="DSlider-item" data-title="44444"><img src="4.jpg" alt="44444"/></li>
  <li class="DSlider-item" data-title="55555"><img src="5.jpg" alt="55555"/></li>
</ul>

3. Include jQuery library and the JavaScript file DSlider.js at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/DSlider.js"></script>

4. Call the plugin on the html list. That's it.

$(".Slider-demo").Slider();

5. Customize your carousel using the following options.

$(".Slider-demo").Slider({

  // staring slide
  startSlide: 0,

  // CSS selector for child elements
  item: '.DSlider-item',

  // is responsive?
  isFlexible: false,

  // shows pagination
  isShowPage: true,

  // shows image caption bar
  isShowTitle: true,

  // data attribute used to store caption text
  titleAttr: 'data-title',

  // shows navigation
  isShowControls: true,

  // is autoplay
  isAuto: true,

  // autoplay interval
  intervalTime: 5000,

  // animation speed
  affectTime: 300,

  // fade or move
  mode: 'move',

  // left or top
  direction: 'left'
  
});

---

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