keen-slider is a free neutral touch slider for the library with original swiper/scroll behavior and great performance. It does not come with any dependencies, support for print writing, or support for multi-touch, and is compatible with all popular browsers.
More Features:
- Content lazy loading.
- Optional pagination & navigation controls.
- An infinite loop is similar to a carousel.
- Multiple slides on a web page.
- Auto snaps to the subsequent/prev slide after transitioning.
- Horizontal & Vertical modes.
- Fully responsive and mobile-friendly primarily based on media queries.
- Works with React, Angular, Vue, and Vanilla JavaScript.
- Powerful but straightforward to implement.
- And rather more.
Must Read: [CSS3] Responsive jQuery Coverflow Touch Slider Plugin | flipster
How to make use of it:
Install & Download:
# NPM $ npm install keen-slider --save
1. Import the keen-slider as a module.
import 'keen-slider/keen-slider.min.css' import KeenSlider from 'keen-slider'
2. Or load the JavaScript and CSS information 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.
<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> ... </div>
5. Config & customize the slider.
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 });
6. API strategies.
// 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();
7. Event handlers.
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 }, });
See Demo And Download
Official Website(rcbyr): Click Here
This superior jQuery/javascript plugin is developed by rcbyr. For extra Advanced Usage, please go to the official website.