touch slider slideshow sliker - Free Download Responsive Touch-enabled Slider/Slideshow Plugin For jQuery - Sliker

Free Download Responsive Touch-enabled Slider/Slideshow Plugin For jQuery – Sliker

Posted on

This time I will share jQuery Plugin and tutorial about Responsive Touch-enabled Slider/Slideshow Plugin For jQuery – Sliker, hope it will help you in programming stack.

touch slider slideshow sliker - Free Download Responsive Touch-enabled Slider/Slideshow Plugin For jQuery - Sliker
File Size: 2.73 MB
Views Total: 3748
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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

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

3. Insert slides to the slider as follows:

01 <div id="example" class="sliker">
02   <div class="sliker__window">
03     <ul class="sliker__track">
04       <li class="sliker__item">Slide 1</li>
05       <li class="sliker__item">Slide 2</li>
06       <li class="sliker__item">Slide 3></li>
07       ...
08     </ul>
09   </div>
10 </div>

4. Initalize the Sliker with default settings. Done.

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

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

01 <div id="example" class="sliker">
02   <div class="sliker__window">
03     <ul class="sliker__track">
04       <li class="sliker__item">Slide 1</li>
05       <li class="sliker__item sliker__item--selected">Slide 2</li>
06       <li class="sliker__item">Slide 3></li>
07       ...
08     </ul>
09   </div>
10 </div>

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

01 <div id="example" class="sliker sliker--safeload">
02   <div class="sliker__window">
03     <ul class="sliker__track">
04       <li class="sliker__item">Slide 1</li>
05       <li class="sliker__item sliker__item--selected">Slide 2</li>
06       <li class="sliker__item">Slide 3></li>
07       ...
08     </ul>
09   </div>
10 </div>

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

01 <div id="example" class="sliker sliker--safeload"
02      data-arrow="fa fa-caret"
03      data-bullet="<i class='fa fa-star'></i>">
04   <div class="sliker__window">
05     <ul class="sliker__track">
06       <li class="sliker__item">Slide 1</li>
07       <li class="sliker__item sliker__item--selected">Slide 2</li>
08       <li class="sliker__item">Slide 3></li>
09       ...
10     </ul>
11   </div>
12 </div>

8. Full plugin options to customize the slider.

01 $('#example').sliker({
02  
03   // the number of elements that scroll with each movement.
04   'nbr_li': 1,
05  
06   // autoplay interval
07   'vitesse_auto': 3000,
08  
09   // animation speed
10   'vitesse': 0.5,
11  
12   // 1 = enable autoplay
13   // 2 = disable autoplay
14   // custom = custom
15   'auto': 0,
16  
17   // isualiseur, menu, none.
18   'type': "none",
19  
20   // target element
21   // ex: #slider_deux
22   'cible': "none",
23  
24   // if active, the slider is isolated by a transparent black background
25   'isolement': 0,
26  
27   // pc only?
28   'pc_only': 0,
29  
30   // enable infinite loop
31   'loop': 0,
32