Carousel

Wrapper component utilizing React-Slick carousel. Wrap this component around any DOM node to display it in a sliding carousel. All the props from React-Slick are available. Props list: https://react-slick.neostack.com/docs/api/

Props

children

Node

required

className

String

dots

Bool

true

infinite

Bool

true

slidesToScroll

Number

slidesToShow

Number

speed

Number

500

Examples

Basic Carousel

1

<Carousel
  dots={true}
  infinite={true}
  speed={500}
  slidesToShow={1}
  slidesToScroll={1}
>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      1
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      2
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      3
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      4
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      5
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      6
    </h3>
  </div>
</Carousel><Carousel
  dots={true}
  infinite={true}
  speed={500}
  slidesToShow={1}
  slidesToScroll={1}
>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      1
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      2
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      3
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      4
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      5
    </h3>
  </div>
  <div>
    <h3
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      6
    </h3>
  </div>
</Carousel>

Carousel

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

1

Props