Full-featured Mobile-first Carousel Library – kineto

Preview:

Description:

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>
  <div class="slide">
    <span class="count">Slide 2</span>
  </div>
  <div class="slide">
    <span class="count">Slide 3</span>
  </div>
  ...
</div>

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

Kineto.create('#example');

4. Config the carousel controls.

Kineto.create('#example',{
  // 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.

Kineto.create('#example',{
  // 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.

Kineto.create('#example',{
  // '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.

Kineto.create('#example',{
  stream: false, // enable autoplay
  streamEvery: 3000,
  streamRewind: true,
  pauseOnFocus: true,
  pauseOnHover: false,
});

8. Config the ‘swipe to slide’ behavior.

Kineto.create('#example',{
  touchSwipe: true,
  mouseSwipe: true,
  swipeThreshold: 3,
  swipeMultiplier: 1,
  swipeEdgeBounce: true,
  swipeEdgeFriction: 0.8
});

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

Kineto.create('#example',{
  wheel: false,
  wheelTarget: null,
  wheelThrottle: 'auto',
  wheelEdgeRelease: true
});

10. Config the responsive behavior.

Kineto.create('#example',{
  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>
<div id="instance-2" class="carousel">
  ...
</div>
...

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
Kineto.setDefaults({
  // options here
});
// set class format
// string | function
Kineto.setClassFormat('BEM');
// go to a specific slide
Kineto.goTo(index);
// go to the next slide
Kineto.next();
// go to the prev slide
Kineto.prev();
// refresh the carousel
Kineto.refresh();
// add a new slide to the carousel
.addSlide('#carousel', htmlContent, index);
// remove the last slide
Kineto.removeSlide('#carousel');
// 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
Kineto.replaceSlides('#carousel');
// 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
Kineto.play();
// pause the autoplay
Kineto.pause();
// bind/unbind events (see below)
Kineto.on();
Kineto.off();

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