Feature-rich Framework-agnostic Touch Slider Library – keen-slider

Preview:

Description:

keen-slider is a multifunctional, framework-agnostic slider library that can be used to transition between any elements with touch & drag events.

More Features:

• Content lazy loading.
• Optional pagination & navigation controls.
• Infinite loop just like a carousel.
• Multiple slides on a page.
• Auto snaps to the next/prev slide after transitioning.
• Horizontal & Vertical modes.
• Fully responsive and mobile-friendly based on media queries.
• Works with React, Angular, Vue, and Vanilla JavaScript.
• Powerful yet easy to implement.
• And much more.

Install & Download:

# NPM
$ npm install keen-slider --save

How to use it (Vanilla JS):

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 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>
  ...
</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,
    // cancel on leave
    cancelOnLeave: true
    
});

6. API methods.

// 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
    },
});

Changelog:

v6.8.5 (11/24/2022)

• Bugfixes

v6.8.3 (10/18/2022)

• Bugfixes

v6.8.2 (09/19/2022)

• Fixed react hook for React 18

v6.8.1 (09/15/2022)

• Fixed the prevention of clicks when dragging is active

v6.8.0 (09/12/2022)

• Changed the method of preventing clicks when dragging, which improves performance

v6.7.0 (06/15/2022)

• Added new property (slidesLength) to the track details, specifying the length of the slides and the distances between them.
• Bugfixes

v6.6.14 (05/15/2022)

• bugfix

v6.6.13 (05/05/2022)

• update

v6.6.12 (05/01/2022)

• fix plugin loading for ios11

v6.6.11 (04/30/2022)

• fix: maxIdx when trackLength is 0

v6.6.10 (04/21/2022)

• set property out of .keen-slider scope

v6.6.9 (04/17/2022)

• use own sign method

v6.6.8 (04/16/2022)

• fix runtime error

v6.6.7 (04/13/2022)

• fix rounding error maxRelativeIdx

v6.6.5 (03/27/2022)

• refactor performance mode

v6.6.3 (01/05/2022)

• bugfix

v6.6.2 (12/22/2021)

• bugfix

v6.6.1 (12/20/2021)

• bugfix

v6.4.1 (12/13/2021)

• check number of slides before set range

v6.4.0 (12/12/2021)

• Remove plugin override

v6.3.5 (12/11/2021)

• fix: use correct options

v6.3.4 (12/08/2021)

• fix: types

v6.3.2 (12/06/2021)

• bugfix

v6.3.1 (12/06/2021)

• fix: get container and slides

v6.3.0 (12/05/2021)

• extend update function

v6.2.4 (12/03/2021)

• update

v6.2.0 (12/01/2021)

• calc targetIdx for animations

v6.0.5 (11/29/2021)

• update

v6.0.4 (11/28/2021)

• update

v6.0.2 (11/27/2021)

• fixed typo

v6.0.1 (11/25/2021)

• update

v5.5.0 (06/10/2021)

• make adjustment of slidesPerView optional

v5.4.1 (05/11/2021)

• fix click events within slides

v5.4.0 (01/17/2021)

• feat: add pubfunc to get current options

v5.3.5 (12/02/2020)

• added cancelOnLeave option

v5.3.2 (11/11/2020)

• remove duplicate property

v5.2.4 (10/03/2020)

• update

v5.2.3 (08/28/2020)

• update

v5.2.2 (07/23/2020)

• set passive options of event listeners

v5.2.1 (07/20/2020)

• update

v5.2.0 (07/14/2020)

• simplified the assignment

v5.1.0 (07/11/2020)

• Added possibility for dynamic slides per view

v5.0.5 (07/04/2020)

• update

v5.0.3 (06/29/2020)

• fixed vertical slider and reszing

v4.2.6 (06/26/2020)

• reset slidesPerView to length-1 only in loop mode
• CSS refactor