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

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.

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.

  • Publication date: 30.10.2018
  • Source