Migration guide

In the carousel v2 in order to make carousel more maintainable, many props have been replaced with the plugins. In the following section, you can find out how to migrate the carousel v1 props into plugins.

slidesPerPage

v1

<Carousel
  slidesPerPage={2}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

import { slidesToShowPlugin } from '@brainhubeu/react-carousel';

<Carousel
  plugins={[
    {
      resolve: slidesToShowPlugin,
      options: {
       numberOfSlides: 2
      }
    },
  ]}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

clickToChange

v1

<Carousel
  clickToChange
>
 <img src={imageOne} />
 <img src={imageTwo} />
 <img src={imageThree} />
</Carousel>

v2

<Carousel
  plugins={[
    'clickToChange',
]}
>
 <img src={imageOne} />
 <img src={imageTwo} />
 <img src={imageThree} />
</Carousel>

arrows

v1

<Carousel
  arrows
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

<Carousel
  plugins={['arrows']}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

infinite

v1

<Carousel
  infinite
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

<Carousel
  plugins={[
    'infinite'
  ]}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

rtl

v1

<Carousel rtl >
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

<Carousel
  plugins={[
    'rtl'
  ]}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

centered

v1

<Carousel centered >
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

<Carousel
  plugins={[
    'centered'
  ]}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

slidesPerScroll

v1

<Carousel
  slidesPerScroll={2}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

import { slidesToScrollPlugin } from '@brainhubeu/react-carousel';

<Carousel
  plugins={[
    {
      resolve: slidesToScrollPlugin,
      options: {
       numberOfSlides: 2,
      },
    },
  ]}   
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

keepDirectionWhenDragging

v1

<Carousel
  keepDirectionWhenDragging
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

<Carousel
  plugins={[
    'fastSwipe',
  ]}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

autoplay

v1

<Carousel
  autoPlay={2000}
  animationSpeed={1000}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

v2

import { autoplayPlugin } from '@brainhubeu/react-carousel';

<Carousel
    plugins={[
    {
      resolve: autoplayPlugin,
      options: {
        interval: 2000,
      }
    },
  ]}   
  animationSpeed={1000}
>
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />
</Carousel>

dots

In v2, the dots property has been removed. Please use dots component instead.

lazyLoad

We are working on implementing this feature in the carousel v2. Stay tuned...