Full-featured jQuery Content / Image Slider Plugin - jSlider
File Size: | 20.6 KB |
---|---|
Views Total: | 4800 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.