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({ |