Full featured jQuery Content Image Slider Plugin jSlider - Download Full-featured jQuery Content / Image Slider Plugin - jSlider

Download Full-featured jQuery Content / Image Slider Plugin – jSlider

By Posted on

This time I will share jQuery Plugin and tutorial about Full-featured jQuery Content / Image Slider Plugin – jSlider, hope it will help you in programming stack.

Full featured jQuery Content Image Slider Plugin jSlider - Download Full-featured jQuery Content / Image Slider Plugin - jSlider
File Size: 20.6 KB
Views Total: 4702
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



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.

view source
1 <link rel="stylesheet" href="jSlider.css">
2 <script src="jquery-latest.min.js"></script>
3 <script src="jquery.jSlider.js"></script>

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

view source
1 <div id="demo" class="jSlider">
2   <div><img src="1.jpg"></div>
3   <div><img src="3.jpg"></div>
4   <div><img src="4.jpg"></div>
5   <div><img src="5.jpg"></div>
6   <div><img src="6.jpg"></div>
7 </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”.
view source
1 <div id="demo" class="jSlider"
2      data-navigation="hover"
3      data-indicator="always"
4      data-speed="500"
5      data-transition="slide"
6      data-loop="false"
7      data-group="1"
8 >

4. Public methods.

view source
01 // Initialize a sldier inside the container #sliderID
02 $('#sliderId').sliderInit({settings});
03  
04 // cancel autoplay
05 $('#sliderId').sliderStop();
06  
07 // go to next or previous slide.
08 // you must specify the direction value (1 or -1)
09 $('#sliderId').sliderStop(direction);
10  
11 // go to a specific slide
12 $('#sliderId').sliderUp<a href="https://www.jqueryscript.net/time-clock/">date</a>(index);

5. Events.

view source
01 // this event is fired when the slider is created.
02 $('#sliderId').on('slideCreated', function(evt) {
03     /* do something */
04 });
05  
06  
07 // this event is fired when the slider begin a transition.
08 $('#sliderId').on('slideStart', function(evt) {
09     /* do something */
10 });
11  
12 // this event is fired when the slider finish a transition.
13 // You can access the current slide index in event value.
14 $('#sliderId').on('slideComplete', function(evt) {
15     alert(evt.current);    /* return the current slide index */
16 });
17  
18 // this event is fired when the autoplay is canceled.
19 $('#sliderId').on('slideCancelAutoPlay', function(evt) {
20     /* do something */
21 });

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.




source : jqueryscript.net

Related posts: