Another Responsive Image Slider Plugin For jQuery

File Size: 634 KB
Views Total: 2993
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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 class="slider-nav">
<div class="slider-active"></div>
<div class="slider-prev slider-disabled">&lsaquo;</div>
<div class="slider-next">&rsaquo;</div>

3. Call the plugin with all the default settings.

$(document).ready(function() {

4. Options and defaults.

  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

// stop the slider

// enable the slider

// disable the slider

// destroy the slider

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)

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