@onrewind/krousel v0.4.5

krousel

Carousel library with vanilla Javascript

Disclaimer: This library is inspired by Slick which is a jQuery plugin. The goal is to provide a similar utility without the jQuery dependency. The API here is almost the same as Slick's one.

Installation

$ npm install @onrewind/krousel

Features

• Infinite loop
• Change transition speed & type (slide / fade)
• Autoplay & autoplay speed
• Enable / Disable arrows
• Enable / Disable navigation dots
• Show multiple slides at once
• Slide multiple slides at once
• Responsive: change config using breakpoints
• Change where dots and/or arrows will be inserted
• Use custom arrows

Options

Responsive option example

The responsive option takes an array of breakpoints, each one should be an object structured as follow:

• breakpoint • Number • Screen width at which the breakpoint will be activated
• settings • Object • Object containing options that will overwrite initial options

LIMITATION: the settings property only accepts overwrites for these options:

slidesToShow, slidesToScroll, infinite

This list could increase over time

Only one breakpoint will be enabled at a time.

const options = {
  // [...]
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        infinite: true,
      },
    },
    {
      breakpoint: 400,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
      },
    },
  ],
};