React Slick not working

Question

I'm new to slick, react, and react-slick and I have made a new component using react-slick. When I implemented the responsive carousel and CSS (and even before that) the elements are stacked vertically as you can see in this image. Any help would be appreciated.

Answer 1

A few things to have into consideration:

1- Be sure to install and import the proper files

npm install react-slick --save
npm install slick-carousel


// Import the Component and the css files in your MyComponent.jsx file
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Note: If you are using Typescript probably you will need to install the @types too:

npm install @types/react-slick --save

2- Remember you don't have to add flex or anything like that to the father container because the library already situates the elements itself, so if you have a container with flex remove it.

3- Be sure to pass the proper setting to the Component, especially the slidesToShow: x

eg:

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

    <Slider {...settings}>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </Slider>