Creare un carousel in React con React Slick

React Slick è un libreria, direi completa, per creare dei carousel in React.

In questo articolo vediamo come usarla.

Possiamo installare tutto con npm:

npm install react-slick slick-carousel --save

Qui sotto un codice di esempio:

import Slider from "react-slick";

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function App() {
    let itemList = [];
    for (let i = 1; i < 8; i++) {
        itemList.push(<div key={i}><h3>{i}</h3></div>)
    }

    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 3
    };

    return (
        <div className="App">
            <Slider {...settings}>
                {itemList}
            </Slider>
        </div>
    );
}

export default App;

La documentazione è ben fatta, e ci sono tutte la altre possibili opzioni!

Dategli un'occhiata.

Enjoy!