Slick-like Flexible Carousel Library – krousel

krousel is a flexible, customizable, responsive, touch-friendly carousel library inspired by the Slick.js jQuery plugin.

Written in pure JavaScript. With no dependency.

Features:

• Infinite loop.
• ES6 module.
• Auto play.
• Supports touch events.
• Custom carousel controls.
• Custom responsive breakpoints.
• Slide and fade transitions.
• Multiple items per slide.

How to use it:

1. Install & download the krousel.

# NPM
$ npm install krousel --save

2. Import the krousel as a module.

import Krousel from './dist/krousel';

3. Or directly load the UMD version in the document.

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

4. Add slides to the carousel as follows:

<div class="slider">
  <div class="item"><h3>1</h3></div>
  <div class="item"><h3>2</h3></div>
  <div class="item"><h3>3</h3></div>
  <div class="item"><h3>4</h3></div>
  <div class="item"><h3>5</h3></div>
  ...
</div>

5. Initialize the krousel with default options.

var myCarousel = new Krousel(document.querySelector('.slider'));

6. Customize the navigation arrows.

.k-arrow-left:before {
  content: '<';
}
.k-arrow-right:before {
  content: '>';
}
.k-arrow-left,
.k-arrow-right {
  background: #fafafa;
  padding: .5em;
}

7. Customize the pagination bullets.

.k-dot {
  background: #e6e6e6;
}

8. Customize the transition effect between slides.

.k-slide {
  opacity: .2;
  transition: opacity 300ms ease-in-out;
}
.k-slide-visible {
  opacity: 1;
}

9. Customize the carousel with the following optional settings.

var myCarousel = new Krousel(document.querySelector('.slider'),{
    // Change where arrows are attached (default is the target)
    appendArrows: null,
    // Change where the navigation dots are attached
    appendDots: null,
    // enable or disable arrows
    arrows: true,
    // Auto play the carousel
    autoplay: false,
    // Change the interval at which autoplay change slide
    autoplaySpeed: 3000,
    // Display or Hide dots
    dots: true,
    // Enable or disable infinite behavior
    infinite: true,
    // Customize the "next" arrow
    nextArrow: null,
    // pause autoplay when a slide is hovered,
    pauseOnHover: true,
    // Customize the "previous" arrow
    prevArrow: null,
    // breakpoints config
    responsive: null,
    // Number of slide to show at once
    slidesToShow: 1,
    // Number of slide to scroll when clicking on arrow
    slidesToScroll: 1,
    // transition speed when changing slide
    speed: 300,
    // Change transition type when changing slide
    // NOTE: transition 'fade' disable options slidesToShow and slidesToScroll
    transition: 'slide',
});

Changelog:

v0.2.4 (06/23/2020)

• fix(quick swipe): prevent quick swipe from looping non-infinite sliders

v0.2.3 (06/22/2020)

• fix(swipe): prevent click event on slides when its related to swiping

v0.2.1 (06/20/2020)

• interpret quick swipe as show next or prev

v0.1.4 (05/26/2020)

• Bugfixed