Full-featured Mobile-first Carousel Library – kineto

Category: Javascript , Recommended , Slider | November 14, 2020
Author: findawayer
Views Total: 488 views
Official Page: Go to website
Last Update: November 14, 2020
License: MIT

Preview:

Full-featured Mobile-first Carousel Library – kineto

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

You Might Be Interested In:


Leave a Reply