Full-featured jQuery Content / Image Slider Plugin - jSlider

jSlider is a simple, lightweight, full-featured jQuery plugin for creating animated content / images on your webpage / web applications.

Features:

• Mobile-friendly. Support both mouse drag and touch swipe to switch between slides.
• Cross browser. Supports all major browsers and even IE 8/9/10.
• Options can be passed via data-attributes directly in the markup.
• Arrows and dots navigation.
• Custom animation types.
• Fully responsive for any screen size.
• 3 built-in slider modes (slide, fade & gallery) to fit your any needs.
• Supports infinite looping that makes the slider act like a carousel.
• Auto resize slider content to fit parent container.

Basic usage:

1. Make sure you have jQuery library, jSlider.css, and jquery.jSlider.min.js loaded correctly in the document.

<link rel="stylesheet" href="jSlider.css">
<script src="jquery-latest.min.js"></script>
<script src="jquery.jSlider.js"></script>

2. Add your content wrapped in the DIV elements into a container which has the 'jSlider' class.

<div id="demo" class="jSlider">
  <div><img src="1.jpg"></div>
  <div><img src="3.jpg"></div>
  <div><img src="4.jpg"></div>
  <div><img src="5.jpg"></div>
  <div><img src="6.jpg"></div>
</div>

3. You can pass the options to the slider using data-attributes set in the wrapper.

• data-navigation: ("always", "none" or "hover") this manages the display of previous / next buttons.
• data-indicator: ("always", "none" or "hover")this manages the display of pagination buttons at the bottom of the slider..
• data-speed: this manages transition speed of the slider in milliseconds.
• data-delay: this manages autoplay delay time between each transition of the slider in milliseconds.If you do not want the autoplay, set it to "0" (zero)
• data-transition: ("slide" or "fade") this manages transition type of the slider.
• data-loop: this manages slide loop. If set to "true", when the slider reach to the end the next slide will be first slide. Vice versa.
• data-group: this manages slide group. You will define the group of elements in each slide. This is a specialize property for gallery mode. In "fade" transition, the value is always "1".

<div id="demo" class="jSlider" 
     data-navigation="hover" 
     data-indicator="always"
     data-speed="500"
     data-transition="slide"
     data-loop="false"
     data-group="1"
>

4. Public methods.

// Initialize a sldier inside the container #sliderID
$('#sliderId').sliderInit({settings});

// cancel autoplay
$('#sliderId').sliderStop();

// go to next or previous slide.
// you must specify the direction value (1 or -1)
$('#sliderId').sliderStop(direction);

// go to a specific slide
$('#sliderId').sliderUpdate(index);

5. Events.

// this event is fired when the slider is created.
$('#sliderId').on('slideCreated', function(evt) {
    /* do something */
});


// this event is fired when the slider begin a transition.
$('#sliderId').on('slideStart', function(evt) {
    /* do something */
});

// this event is fired when the slider finish a transition. 
// You can access the current slide index in event value.
$('#sliderId').on('slideComplete', function(evt) {
    alert(evt.current);    /* return the current slide index */
});

// this event is fired when the autoplay is canceled.
$('#sliderId').on('slideCancelAutoPlay', function(evt) {
    /* do something */
});

Change log:

2015-11-26

• Update

2015-11-07

• Fix css end transition event

2015-05-19

• update.

---

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