@onrewind/krousel-react

React wrapper for @onrewind/krousel

Usage no npm install needed!

<script type="module">
  import onrewindKrouselReact from 'https://cdn.skypack.dev/@onrewind/krousel-react';
</script>

README

@onrewind/krousel-react

React wrapper for krousel - a javascript carousel library

Check the demo here

Installation

npm install --save @onrewind/krousel @onrewind/krousel-react

Features

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

Options

Pass options as properties to Krousel

import '@onrewind/krousel/dist/krousel.css';
import Krousel from '@onrewind/krousel-react';

// render
<Krousel infinite={true} slidesToShow={2}>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
  <div>Slide 5</div>
</Krousel>

You can find the list of options here

To customize arrows you can also provide a React component instance to prevArrow and nextArrow options (see examples)