Full-featured Mobile-first Carousel Library – kineto

Category: Javascript , Recommended , Slider | November 14, 2020
Views Total:1,408 views
Official Page:Go to website
Last Update:November 14, 2020


Full-featured Mobile-first Carousel Library – kineto


kineto is a powerful, feature-rich, fully responsive, mobile-friendly, and open-source carousel JavaScript library for the web.

Highlighted Features:

  • Supports mouse drag, mouse wheel, and touch swipe events.
  • Allows multiple items per slide.
  • Supports both vertical and horizontal scrolling.
  • Infinite loop and autoplay.
  • 28+ easing functions.
  • Responsive layout based on CSS flexbox.
  • Makes slides equal height or auto adapts to the slide’s height.
  • Auto moves the carousel to a specific slide on click.
  • Configurable carousel controls: navigation, pagination, counter, etc.
  • Also allows to sync between carousel instances.
  • Add, remove, replace slides.

How to use it:

1. To get started, simply add the kineto’s JavaScript and CSS files to the webpage.

<link rel="stylesheet" href="dist/kineto.css" />
<script src="dist/kineto.js"></script>

2. Add slides containing any web content to the carousel.

<div id="example" class="carousel">
  <div class="slide">
    <span class="count">Slide 1</span>
  <div class="slide">
    <span class="count">Slide 2</span>
  <div class="slide">
    <span class="count">Slide 3</span>

3. Initialize the kineto to generate a basic carousel on the page.


4. Config the carousel controls.

  // navigation arrows
  arrows: true,
  arrowsInto: null,
  arrowTemplate: null,
  // slide counter
  count: false,
  countInto: null,
  countTemplate: null,
  // pagination bullets
  pagination: true,
  paginationInto: null,
  paginationTemplate: null

5. Config the transition effect between slides.

  // move 1 slide at a time
  moveBy: 1,
  // animation speed
  speed: 600,
  // linear, ease, easeIn, easeOut, easeInOut, easeInSine, easeOutSine, easeInOutSine, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInBack, easeOutBack, easeInOutBack
  easing: '',
  // move slides on click
  moveOnClick: false,
  // prevents movements from being fired while an animation being played
  waitAnimation: false,

6. Available layout options for the carousel.

  // 'horizontal' or 'vertical'
  mode: 'horizontal',
  //  'center', 'start', 'end', 'justify'
  align: 'center',
  // number of slides to show per view
  perView: 'auto',
  // 'auto', 'adaptive', 'equal'
  height: 'auto',
  // margin in px
  margin: 10,
  // infinite loop or not
  loop: false,
  // start at slide 1
  startAt: 0

7. Config the autoplay behavior.

  stream: false, // enable autoplay
  streamEvery: 3000,
  streamRewind: true,
  pauseOnFocus: true,
  pauseOnHover: false,

8. Config the ‘swipe to slide’ behavior.

  touchSwipe: true,
  mouseSwipe: true,
  swipeThreshold: 3,
  swipeMultiplier: 1,
  swipeEdgeBounce: true,
  swipeEdgeFriction: 0.8

9. Config the ‘mouse wheel to slide’ behavior.

  wheel: false,
  wheelTarget: null,
  wheelThrottle: 'auto',
  wheelEdgeRelease: true

10. Config the responsive behavior.

  responsive: true,
  responsiveDelay: 100,
  responsive: {
    // 468px ~ 727px
    468: {
      perView: 1,
      margin: 0,
    // 728 ~
    728: {
      perView: 3,
      margin: 30,

11. Synchronize other carousels with the same syncId.

<div id="instance-1" class="carousel">
<div id="instance-2" class="carousel">
Kineto.create('#instance-1', {
  syncId: 'carouselId'
Kineto.create('#instance-2', {
  syncId: 'carouselId'

12. More configurations.

Kineto.create('#example', {
  // sound reader support
  aria: true,
  // css values
  cssPrecision: 3,
  usePercent: false,

13. API methods.

// set options
  // options here
// set class format
// string | function
// go to a specific slide
// go to the next slide
// go to the prev slide
// refresh the carousel
// add a new slide to the carousel
.addSlide('#carousel', htmlContent, index);
// remove the last slide
// remove the 3rd slide
Kineto.removeSlide('#carousel', 2);
// remove the 2nd last slide
Kineto.removeSlide('#carousel', -2);
// remove the last 2 slides
Kineto.removeSlide('#carousel', -2, 2);
// remove all slides
// remove all slides and insert a new slide
Kineto.replaceSlides('#carousel', 'new');
// remove all slides and insert 2 new slides
Kineto.replaceSlides('#carousel', ['new1', 'new2']);
// play the carousel
// pause the autoplay
// bind/unbind events (see below)

14. Available events.

Kineto.on('#carousel', 'destroy', function() {
  // do something
Kineto.on('#carousel', 'change', function(nextIndex, currentIndex) {
  // do something
Kineto.on('#carousel', 'changed', function(currentIndex, previousIndex) {
  // do something

You Might Be Interested In:

Leave a Reply