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.
