Slick-like Flexible Carousel Library – krousel

Category: Javascript , Slider | June 23, 2020
Author: VincentCharpentier
Views Total: 188 views
Official Page: Go to website
Last Update: June 23, 2020
License: MIT

Preview:

Slick-like Flexible Carousel Library – krousel

Description:

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

You Might Be Interested In:


Leave a Reply