React-slick: Carousel with infinite sliding images

Install

npm install slick-carousel react-slick

Import slick CSS and font

Open _app.jsx and import the css files. _app.jsx is located in the same directory where package.json reside.

// _app.jsx
// Needed by React-Slick
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Or, add cdn link in your html

<link rel="stylesheet" type="text/css" charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
/>

<link rel="stylesheet" type="text/css" 
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
/>

Demo implementation

Demo - Carousel: Infinite image sliding with React-Slick
Note: Don't know why but the first time I tried, it didn't slide. I have to move the mouse or press F12 for the slide motion to kick start. From there on, it is working.

// Ref: https://react-slick.neostack.com/docs/example/uneven-sets-infinite
import React from "react";
import Slider from "react-slick";

export default function UnevenSetsInfinite() {
    const settings = {
        autoplay: true,
        autoplaySpeed: 5000,    // When to start sliding.
        dots: true,             // Keep this to tell user that it is sliding window.
        infinite: true,
        speed: 3000,            // Increase to slow down the sliding speed.
        slidesToScroll: 4,
        slidesToShow: 4,
    };

    return (
        <div className="slider-container" style={{ backgroundColor: "lightblue" }}>
            <Slider {...settings}>
                <div style={{ border: "1px solid red" }}>
                    <h3>1 some string 1</h3>
                    <img src="https://placehold.co/25x75" />
                </div>
                <div>
                    <h3>2</h3>
                    <img src="https://placehold.co/50x50" />
                </div>
                <div>
                    <h3>3</h3>
                    <img src="https://placehold.co/75x75" />
                </div>
                <div style={{ border: "10px solid green" }}>
                    <h3>4</h3>
                    <img src="https://placehold.co/100x100" />
                </div>
                <div>
                    <h3>5</h3>
                    <img src="https://placehold.co/50x100" />
                </div>
                <div>
                    <h3>6</h3>
                </div>
            </Slider>
        </div>
    );
}