Carousel library with vanilla Javascript

krousel

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

Download Details:

Author: VincentCharpentier

Live Demo: https://vincentcharpentier.github.io/krousel/

GitHub: https://github.com/VincentCharpentier/krousel

#javascript #programming #jquery