Another Responsive Image Slider Plugin For jQuery

Yet another jQuery plugin for creating a responsive & cross-browser image slider that loops through a group of images with multiple effects and configuration options.

How to use it:

1. Include the required jQuery library and the jQuery slider plugin's files in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="src/slider.js"></script>
<link href="src/slider.css" rel="stylesheet" type="text/css">

2. The Html to create an image slider with controls following the markup structure like this:

<div class="slider" slider>
<div class="slider-content">
<div><img src="1.jpg" alt="Picture 1"></div>
<div><img src="2.jpg" alt="Picture 2"></div>
<div><img src="3.jpg" alt="Picture 3"></div>
</div>
<div class="slider-nav">
<div class="slider-active"></div>
<div></div>
<div></div>
</div>
<div class="slider-prev slider-disabled">&lsaquo;</div>
<div class="slider-next">&rsaquo;</div>
</div>

3. Call the plugin with all the default settings.

$(document).ready(function() {
  $(".slider").slider();
});

4. Options and defaults.

$(".slider").slider({
  activeClass: 'slider-active', // for slide nav
  autoPlay: true,
  contentClass: 'slider-content',
  disableClass: 'slider-disabled', // for slide 'prev btn' and 'next btn'
  duration: 5000,
  effect: 'fade',
  easing: 'swing', // support 'swing' and 'linear', powered by jquery
  navClass: 'slider-nav',
  nextClass: 'slider-next',
  prevClass: 'slider-prev',
  speed: 1000,
  trigger: 'click' // for slide nav
});

5. API methods.

// start the slider
$(".slider").slider('start');

// stop the slider
$(".slider").slider('stop');

// enable the slider
$(".slider").slider('enable');

// disable the slider
$(".slider").slider('disable');

// destroy the slider
$(".slider").slider('destroy');

Change log:

v0.1.1 (2016-05-27)

• Added a new method: destroy.
• Renamed the autoplay option to autoPlay.
• Rename scrollx to scrollX
• Rename scrolly to scrollY
• Improved the cycle of the fade effect.
• Stop sliding when mouse over the slider container.
• Optimized the code style.

v0.0.2 (2014-08-09)

• update.

---

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