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

Option	Type	Default	Description
appendArrows	HTMLElement	null	Change where arrows are attached (default is the target)
appendDots	HTMLElement	null	Change where the navigation dots are attached
arrows	boolean	true	enable or disable arrows
autoplay	boolean	false	Auto play the carousel
autoplaySpeed	number	3000	Change the interval at which autoplay change slide
dots	boolean	true	Display or hide dots
infinite	boolean	true	Enable or disable infinite behavior
nextArrow	HTMLElement	null	Customize the "next" arrow
pauseOnHover	boolean	true	pause autoplay when a slide is hovered,
prevArrow	HTMLElement	null	Customize the "previous" arrow
responsive	Array	null	breakpoints config, see below
slidesToShow	number	1	Number of slide to show at once
slidesToScroll	number	1	Number of slide to scroll at once
speed	number	300	transition speed when changing slide
swipe	boolean	true	Enable or disable drag to change slide
transition	one of: 'slide', 'fade'	'slide'	Change transition type when changing slide NOTE: transition 'fade' disable options slidesToShow and slidesToScroll

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,
      },
    },
  ],
};