Movatterモバイル変換

plugins

slidesToShow plugin

options:

numberOfSlides: Number: Number of slides visible at once.

usage:

<Carouselplugins={[{      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:

<Carouselplugins={[{      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:

<Carouselplugins={['arrows']}>{/ *carousel items... */}</Carousel>

advanced usage:

<Carouselplugins={[{      resolve: arrowsPlugin,      options:{        arrowLeft:<button><Iconname="angle-double-left"/></button>,        arrowLeftDisabled:<button><Iconname="angle-left"/></button>,        arrowRight:<button><Iconname="angle-double-right"/></button>,        arrowRightDisabled:<button><Iconname="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:

<Carouselplugins={['autoplay']}>{/ *carousel items... */}</Carousel>

advanced usage:

<Carouselplugins={[{      resolve: autoplayPlugin,      options:{        interval:2000,}},]}animationSpeed={1000}>{/ *carousel items... */}</Carousel>

clickToChange plugin

Clicking on a slide changes current slide to the clicked one.

usage:

<Carouselplugins={['clickToChange']}>{/ *carousel items... */}</Carousel>

centered plugin

Alignes active slide to the center of the carousel.

usage:

<Carouselplugins={['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:

<Carouselplugins={['infinite']}>{/ *carousel items... */}</Carousel>

advanced usage:

<Carouselplugins={[{      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:

<Carouselplugins={['fastSwipe']}>{/ *carousel items... */}</Carousel>