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.
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"> |
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> |
4. Initalize the Sliker with default settings. Done.
1 |
$(document).ready(function(){ |
2 |
$('#example').sliker(); |
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> |
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> |
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> |
8. Full plugin options to customize the slider.
01 |
$('#example').sliker({ |
