This time I will share jQuery Plugin and tutorial about Touch-friendly Carousel/Swiper Plugin – jQuery io.lightslider, hope it will help you in programming stack.
io.lightslider is a simple, flexible, responsive, mobile-friendly, infinite-looping slider (aka. carousel, swiper) jQuery plugin that uses Hammer.js to handle touch swipe events.
Highly customizable via HTML data
attributes and CSS classes.
How to use it:
1. Load the latest jQuery and Hammer.js libraries in the html document.
2. Add content together with slider controls to the slider.
- io-ls-animated-slow: or ‘io-ls-animated-fast’, ‘io-ls-animated-none’
- io-ls-slide: holds slides
- io-ls-arrows_container: holds navigation arrows
- io-ls-bullet_container: holds pagination bullets
01 |
< div id = "myslider" class = "io-lightslider io-ls-animated-slow" > |
02 |
< div class = "io-ls-field" > |
03 |
< div class = "io-ls-container" > |
04 |
< div class = "io-ls-wrapper" > |
05 |
< div class = "io-ls-slide" > |
06 |
< div class = "io-ls-bgimg" style = "background-image: url('1.jpg');" ></ div > |
07 |
</ div >< div class = "io-ls-slide" > |
08 |
< div class = "io-ls-bgimg" style = "background-image: url('2.jpg');" ></ div > |
09 |
</ div >< div class = "io-ls-slide" > |
10 |
< div class = "io-ls-bgimg" style = "background-image: url('3.jpg');" ></ div > |
15 |
< div class = "io-ls-controls" > |
16 |
< div class = "io-ls-arrows_container" ></ div > |
17 |
< div class = "io-ls-bullet_container" ></ div > |
3. Load the io.lightslider plugin’s files in the document.
1 |
< link href = "dist/io.lightslider.min.css" rel = "stylesheet" > |
2 |
< script src = "dist/io.lightslider.min.js" ></ script > |
4. Initialize the io.lightslider plugin. Done.
2 |
io.lightslider.init( '#myslider' ); |
5. Config the io.lightslider plugin with the following HTML data
attributes and CSS classes.
- data-slider-height: The height of the slider. Default: 600;
- data-slider-window-height: Sets the height to the window height. Default: false;
- data-slider-first-turn-height: Sets the height to first slide’s height. Default: false;
- data-slider-with-cycle: Autoplay. Default: true;
- data-slider-timeout: Autoplay interval. Default: off;
- data-slider-autoplay-ignore-hover: Pause on hover. Default: false;
- io-ls-arrow-withbg: CSS class. Add a background to the arrows navigation;
- io-ls-static: CSS class. Make the pagination bullets display at the bottom of the slider;
This awesome jQuery plugin is developed by semilicon. For more Advanced Usages, please check the demo page or visit the official website.