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.
npm install --save krousel
- 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
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 |
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 activatedsettings
• 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
}
},
]
}