keen-slider

the HTML touch slider carousel with the most native feeling you will get.

View Demo View Github

Features:

  • only 4.5 KB (2 KB gzipped)
  • works great and the same, on all devices and browsers (>= IE10)
  • no dependencies
  • typescript compatible
  • examples for the most common SPA's (react, vue, angular)
  • simple API

Getting Started

Install with npm

$ npm install --save keen-slider

<html>
  <head>
    <link
      rel="stylesheet"
      href="path/node_modules/keen-slider/dist/keen-slider.min.css"
    />
  </head>
  <body>
    <div id="my-keen-slider" class="keen-slider">
      <div class="keen-slider__track">
        <div class="keen-slider__slide"></div>
        <div class="keen-slider__slide"></div>
        ...
      </div>
    </div>

    <script src="path/node_modules/keen-slider/dist/keen-slider.min.js"></script>
    <script>
      new KeenSlider('#my-keen-slider')
    </script>
  </body>
</html>

Use as ES-Module

// optionally import CSS here
import 'keen-slider/dist/keen-slider.min.css'
import KeenSlider from 'keen-slider'

const options_and_events = {
  created: function() {
 console.log('Congratulations! Your slider has ' + this.length + 'items')
  }
  loop: true
}
const slider = new KeenSlider('#my-keen-slider', options_and_events)

Use from CDN

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/keen-slider.min.css"
    />
  </head>
  <body>
    <div id="my-keen-slider" class="keen-slider">
      <div class="keen-slider__track">
        <div class="keen-slider__slide"></div>
        <div class="keen-slider__slide"></div>
        ...
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/keen-slider.min.js"></script>
    <script>
      new KeenSlider('#my-keen-slider')
    </script>
  </body>
</html>

API

Create Slider

var slider = new KeenSlider('#my-slider')
  • container has to be from type HtmlElement or String
    (CSS-Selektor)
  • params has to be from type object, with options and event hooks (optional)

returns a slider instance with public methods and getters

Options

The following options are available.

Option Type Default Description
touchControl Boolean true control slider with mouse or touch gestures
classSlide String "keen-slider__slide" necessary class name for a slide
classTrack String "keen-slider__track" necessary class name for the track
initialSlide Integer 0 initial activate slide
loop Boolean true infinity loop of slides
moveDuration Integer 500 animation time
moveEasing Function function (t) { return --t _ t _ t + 1 } method animation easing 
var options = {
  loop: false,
  initialSlide: 2,
}
var slider = new KeenSlider('#my-slider', options)

Event hooks

The following event hooks are available.

Event Params Description
changed slide Fires after current slide has changed, but before the move animation has started
created - will be triggered after initialization

Example:

var options = {
  changed: function (slide) {
    console.log('Slide ' + slide + ' of ' + this.length)
  },
}
var slider = new KeenSlider('#my-slider', options)

Getters

The following getters are available on a slider instance.

Getter Description
current get number of current slide (starts with 0)
length number of slides

Example:

var slider = new KeenSlider(container, params)
console.log('number of slides:' + slider.length)

Methods

The following methods are available on a slider instance.

Method Arguments Description
destroy - remove events and helper slides of the loop - refesh() would undo this
moveToSlide slide(Integer), instant(Boolean, Default: false) move to given slide - optionally without animation
next - move to next slide
prev - move to previous slide
refresh - refresh slider - for example when you add/remove slides
refreshLoopSlides - refresh loop slides - if slide content was changed
addTouchContols - add touch control events
removeTouchControls - remove touch control events

Example:

var slider = new KeenSlider(container, params)
setInterval(slider.next, 5000)

GitHub