Responsive Touch-enabled Slider/Slideshow Plugin For jQuery - Sliker
File Size: | 2.73 MB |
---|---|
Views Total: | 4331 |
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.
<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.