plugins
slidesToShow plugin
options:
numberOfSlides: Number
: Number of slides visible at once.
usage:
<Carousel
plugins={[
{
resolve: slidesToShowPlugin,
options: {
numberOfSlides: 2
}
},
]}
>
{/ *carousel items... */}
</Carousel>
slidesToScroll plugin
options:
numberOfSlides: Number
: Number by which value will change on scroll (autoPlay, arrow click, drag).
usage:
<Carousel
plugins={[
{
resolve: slidesToScrollPlugin,
options: {
numberOfSlides: 2
}
},
]}
>
{/ *carousel items... */}
</Carousel>
arrows plugin
options:
-
arrowLeft: React element
,arrowLeftDisabled: React element
,arrowRightDisabled: React element
,arrowRight: React element
: React elements to be used instead of default arrows. -
addArrowClickHandler: Boolean
Has to be added for arrowLeft and arrowRight to work.
simple usage:
<Carousel
plugins={['arrows']}
>
{/ *carousel items... */}
</Carousel>
advanced usage:
<Carousel
plugins={[
{
resolve: arrowsPlugin,
options: {
arrowLeft: <button><Icon name="angle-double-left" /></button>,
arrowLeftDisabled:<button><Icon name="angle-left" /></button>,
arrowRight: <button><Icon name="angle-double-right" /></button>,
arrowRightDisabled: <button><Icon name="angle-right" /></button>,
addArrowClickHandler: true,
}
}
]}
>
{/ *carousel items... */}
</Carousel>
autoplay plugin
options:
-
interval: Number
: Slide change interval in milliseconds. Defaults to 2000 -
stopAutoPlayOnHover: Boolean
: Determines if autoPlay should stop when mouse hover over carousel, defaults totrue
-
direction: 'right' | 'left'
: Determines direction of changing slides, defaults toright
simple usage:
<Carousel
plugins={['autoplay']}
>
{/ *carousel items... */}
</Carousel>
advanced usage:
<Carousel
plugins={[
{
resolve: autoplayPlugin,
options: {
interval: 2000,
}
},
]}
animationSpeed={1000}
>
{/ *carousel items... */}
</Carousel>
clickToChange plugin
Clicking on a slide changes current slide to the clicked one.
usage:
<Carousel
plugins={['clickToChange']}
>
{/ *carousel items... */}
</Carousel>
centered plugin
Alignes active slide to the center of the carousel.
usage:
<Carousel
plugins={['centered']}
>
{/ *carousel items... */}
</Carousel>
infinite plugin
Creates an infinite carousel width.
options:
numberOfInfiniteClones: Number
: Number of clones created before and after original carousel slides. Defaults to 1
usage:
<Carousel
plugins={['infinite']}
>
{/ *carousel items... */}
</Carousel>
advanced usage:
<Carousel
plugins={[
{
resolve: infinitePlugin,
options: {
numberOfInfiniteClones: 3,
},
},
]}
>
{/ *carousel items... */}
</Carousel>
fastSwipe plugin
While dragging, it doesn't matter which slide is the nearest one, but in what direction you drag.
usage:
<Carousel
plugins={['fastSwipe']}
>
{/ *carousel items... */}
</Carousel>