keen-slider: Feature-rich Touch Carousel Slider Library

Category: Javascript , Recommended , Slider | July 5, 2023
0 Comment
Authorrcbyr
Last UpdateJuly 5, 2023
LicenseMIT
Tags
Views10,888 views
OfficialGo to website
Live DemoDownload
keen-slider: Feature-rich Touch Carousel Slider Library

keen-slider is a framework-agnostic JavaScript slider library that creates touch-friendly carousel sliders from regular HTML elements.

It works with vanilla JavaScript, TypeScript, React, Vue, Angular, and React Native. The library handles touch gestures, mouse dragging, responsive breakpoints, looping, vertical sliders, custom slide spacing, lifecycle event hooks, and programmatic navigation.

You can use it to create image galleries, product carousels, card sliders, feature panels, mobile-first content strips, and custom UI controls that need native-feeling touch interaction with a small dependency-free slider core.

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.

Alternatives:

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.6 (07/05/2023)

  • Bugfixes

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

See Also:

You Might Be Interested In:

Leave a Reply