keen-slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, typescript support, multitouch support and is compatible with all common browsers including IE 10.
# NPM
$ npm install keen-slider --save
import 'keen-slider/keen-slider.min.css'
import KeenSlider from 'keen-slider'
2. Or load the JavaScript and CSS files from a CDN.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider/keen-slider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/keen-slider/keen-slider.min.js"></script>
3. Create a new keen-slider instance.
var slider1 = new KeenSlider("#slider1");
4. Add slides to the keen slider and done.
<div id="slider1" class="keen-slider">
<div class="keen-slider__slide">Slide 1</div>
<div class="keen-slider__slide">Slide 2</div>
<div class="keen-slider__slide">Slide 3</div>
<div class="keen-slider__slide">Slide 4</div>
<div class="keen-slider__slide">Slide 5</div>
5. Config & customize the keen slider by passing the following options object as the second parameter to the KeenSlider
method.
var slider1 = new KeenSlider("#slider1",{
// auto set the slider to the height of the tallest slide
autoHeight: true,
// auto center the current slide
centered: false,
// pass options for different screen size
// e.g.
// breakpoints: {
// '(min-width: 720px) and (max-width: 1000px)': {
// options here
// },
// }
breakpoints: null,
// enable mouse drag and touch swipe events
controls: true,
// adjust the speed that is translated to the slider when dragging
dragSpeed: 1,
// friction factor
friction: 0.0025,
// enable infinite loop
loop: false,
// initial slide
initial: 0,
// duration of the animation
duration: 500,
// slide selector
slides: '.keen-slider__slide',
// enable vertical mode
vertical: false,
// reset the slider on window resize
resetSlide: false,
// how many slides per view
slidesPerView: 1,
// space between slides
spacing: 0,
// "snap": auto snap to the next/prev slide
// "free-snap": free mode + auto snap
// "free": free mode
mode: 'snap',
// simulate rubberband if moving or dragging above the slider edge
rubberband: true
});</pre>
6\. API methods.
<pre>// go to the next slide
slider1.next();
// back to the previous slide
slider1.prev();
// go to a specific slide
slider1.moveToSlide (slide);
// go to a relative slide
slider1.moveToSlideRelative(slide, nearest, duration);
// enable/disable touch & drag events
slider1.controls();
// refresh the slider
slider1.refresh(options);
// re-init the slider
slider1.Reinitialize();
// re-calc the width/height of the slider
// useful when new items are added to the slider
slider1.resize();
// destroy the slider instance
slider1.destroy();
// return the details of the slider.
slider1.details();
var slider1 = new KeenSlider("#slider1",{
created: slider => {
// do something
},
mounted: slider => {
// do something
},
beforeChange: slider => {
// do something
},
afterChange: slider => {
// do something
},
slideChanged: slider => {
// do something
},
dragStart: slider => {
// do something
},
dragEnd: slider => {
// do something
},
move: slider => {
// do something
},
destroyed: slider => {
// do something
},
});
Author: rcbyr
Live Demo: https://keen-slider.io/examples/#examples
GitHub: https://github.com/rcbyr/keen-slider
#html #css #javascript