Responsive Touch-enabled Slider/Slideshow Plugin For jQuery - Sliker

Sliker is a responsive, customizable, touch-enabled slider & slideshow plugin written in jQuery, HTML, and CSS (LESS).

Main features:

• Autoplay.
• Infinite loop just like a carousel.
• Fade or slide animations.
• Allows to switch between slides with fingers.
• Allows to slide/fade through multiple slides at a time.
• Custom pagination icons.
• Image preloading.
• Fullscreen mode.

How to use it:

1. Insert jQuery JavaScript library and the jQuery Sliker plugin's files into the page.

<link href="./sliker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="./sliker.js"></script>

2. By default, Sliker uses Font Awesome for the navigation icons.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

3. Insert slides to the slider as follows:

<div id="example" class="sliker">
  <div class="sliker__window">
    <ul class="sliker__track">
      <li class="sliker__item">Slide 1</li>
      <li class="sliker__item">Slide 2</li>
      <li class="sliker__item">Slide 3></li>
      ...
    </ul>
  </div>
</div>

4. Initalize the Sliker with default settings. Done.

$(document).ready(function(){
  $('#example').sliker();
});

5. You can set the initial slide on page load using the sliker__item--selected class.

<div id="example" class="sliker">
  <div class="sliker__window">
    <ul class="sliker__track">
      <li class="sliker__item">Slide 1</li>
      <li class="sliker__item sliker__item--selected">Slide 2</li>
      <li class="sliker__item">Slide 3></li>
      ...
    </ul>
  </div>
</div>

6. Enable the safe load mode to preserve the aspect of the slider before init.

<div id="example" class="sliker sliker--safeload">
  <div class="sliker__window">
    <ul class="sliker__track">
      <li class="sliker__item">Slide 1</li>
      <li class="sliker__item sliker__item--selected">Slide 2</li>
      <li class="sliker__item">Slide 3></li>
      ...
    </ul>
  </div>
</div>

7. Customize the navigation arrows and pagination bullets using your own icons.

<div id="example" class="sliker sliker--safeload"
     data-arrow="fa fa-caret" 
     data-bullet="<i class='fa fa-star'></i>">
  <div class="sliker__window">
    <ul class="sliker__track">
      <li class="sliker__item">Slide 1</li>
      <li class="sliker__item sliker__item--selected">Slide 2</li>
      <li class="sliker__item">Slide 3></li>
      ...
    </ul>
  </div>
</div>

8. Full plugin options to customize the slider.

$('#example').sliker({

  // the number of elements that scroll with each movement.
  'nbr_li': 1,

  // autoplay interval
  'vitesse_auto': 3000, 

  // animation speed
  'vitesse': 0.5,

  // 1 = enable autoplay
  // 2 = disable autoplay
  // custom = custom
  'auto': 0,

  // isualiseur, menu, none.
  'type': "none",

  // target element
  // ex: #slider_deux
  'cible': "none",

  // if active, the slider is isolated by a transparent black background 
  'isolement': 0,

  // pc only?
  'pc_only': 0, 

  // enable infinite loop
  'loop': 0,

  // if active, the element will elastically take the entire slider area
  'liquid': 1, 

  // enable drag/swipe events
  'drag': 0,

  // automatically creates an area with the image zoomed over the slider.
  'creer_afficheur': 0,

  // enable fade mode
  'fading_mode': 0,

  // mode 1: white fade. mode 2: fade out between two frames.
  'fading_type': 1, 

  // the number of images to preload.
  // requires data-src instead of src.
  'buffering_nbr': 1, 

  // shows fullscreen button
  'fullscreen': 0,

  // shows pagination bullets
  'bullets': 1,
  'bullets_limit': 20, 
  'bullets_limit_mobile': 8, 

  // shows navigation arrows
  // 0 = never, 1 = pc only, 2 = pc and mobile
  'arrows': 2
  
});

Changelog:

2019-12-03

• v2.1.2

---

This awesome jQuery plugin is developed by Zenike. For more Advanced Usages, please check the demo page or visit the official website.