Touch-friendly Carousel/Swiper Plugin - jQuery io.lightslider

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.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

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

<div id="myslider" class="io-lightslider io-ls-animated-slow">
  <div class="io-ls-field">
    <div class="io-ls-container">
      <div class="io-ls-wrapper">
        <div class="io-ls-slide">
          <div class="io-ls-bgimg" style="background-image: url('1.jpg');"></div>
        </div><div class="io-ls-slide">
         <div class="io-ls-bgimg" style="background-image: url('2.jpg');"></div>
        </div><div class="io-ls-slide">
         <div class="io-ls-bgimg" style="background-image: url('3.jpg');"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="io-ls-controls">
    <div class="io-ls-arrows_container"></div>
    <div class="io-ls-bullet_container"></div>
  </div>
</div>

3. Load the io.lightslider plugin's files in the document.

<link href="dist/io.lightslider.min.css" rel="stylesheet">
<script src="dist/io.lightslider.min.js"></script>

4. Initialize the io.lightslider plugin. Done.

$(function(){
  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.