React slick slider not working properly

[harshal255]

when I refresh my site then it displays only a blank page with small buttons group. & after clicking on the button I will see my slider items.you can see on below video

https://github.com/akiran/react-slick/assets/93152436/2cd392db-8697-4765-a3c9-cca8ca2b7796

here is my settings.js file

const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 8,
        slidesToScroll: 1,

        responsive: [
            {
                breakpoint: 480, // Mobile
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,

                },
            },
            {
                breakpoint: 768, // Tablet
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                },
            },
            {
                breakpoint: 1200, // Laptop
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,

                },
            },
            {
                breakpoint: 1600, // Desktop
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1,

                },
            },
        ]
    };

here is my jsx for slider content :

                    {clothes
                        .filter(item => new Date(item.due_date) >= new Date())
                        .slice(0, 10)
                        .map((item, index) => (
                            <div key={item.id} className="group flex flex-col gap-3 items-center justify-start relative h-[335px] w-auto border rounded-lg overflow-hidden shadow-lg duration-300 my-4 bg-white">
                                <img src={item.thumbnail} className="cursor-pointer w-full h-1/2" onClick={() => navigate(`/Stores/${item.name}`, { state: { sId: item.id } })} />
                                <span
                                    className={`p-2 hidden group-hover:inline-block duration-300 absolute right-1 top-1 rounded-lg bg-gray-300/80 ${role && likedItems.includes(item.coupon_id) ? 'text-red-500' : 'text-white'
                                        }`}
                                    onClick={() => handleLikeClick(index, item.coupon_id)}
                                >
                                    <FaHeart className="cursor-pointer text-xl duration-300" />
                                </span>
                                <div

https://github.com/akiran/react-slick/assets/93152436/6a4ff9e1-9ade-4b03-94d1-40509617eb68

                                    className="absolute z-10 left-2 bottom-36 mt-2 shadow-boxshadow h-[75px] w-[75px] rounded-full flex flex-wrap items-center justify-center overflow-clip p-1 bg-white cursor-pointer"
                                    onClick={() => navigate(`/Stores/${item.name}`, { state: { sId: item.id } })}>
                                    <img src={item.logo_url} alt="logo" className="h-full w-auto object-cover rounded-full" />
                                </div>
                                <div className="ml-24 flex w-[60%] justify-end items-center text-gray-700 ">
                                    {item.isVerified && <span className="text-black bg-blue-200 px-1 rounded-md text-[12px] uppercase">Verified</span>}
                                </div>
                                <div className="mx-4 h-[48px] p-2 text-start cursor-pointer" onClick={() => handleOpen(item)}>
                                    <span className="text-black mr-2 ">{item.title}</span>
                                </div>
                                <div className="flex justify-between items-center w-full text-sm p-3 text-[10px]">
                                    <span>{item.name}</span>
                                    <span>{item.user_count} Used</span>
                                </div>
                                <div className="flex flex-col items-center justify-between">
                                    <button className="button has-code" onClick={() => handleOpen(item)} >
                                        <span className="is-code">74{item.coupon_code}</span>
                                        <span className="is-code-text uppercase"><em>Get {item.type}</em></span>
                                    </button>
                                </div>
                            </div>
                        ))}
                </Slider> 

I have installed packages: "react-slick": "^0.29.0", "slick-carousel": "^1.8.1" and imported css :

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

and here is external css file for slider

/* Custom styles for Slick dots */
.slick-dots {
  bottom: -10px;
}

.slick-dots li button {
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background-color: #ccc;
}

.slick-slider .slick-slide {
  padding: 0 5px;
}

@media (max-width: 640px) {
  .slick-dots li button {
    width: 10px;
    height: 10px;
  }
}

.slick-dots li.slick-active button {
  background-color: #b33d53;
}

.slick-list {
 overflow: hidden;
}
.slick-slide.slick-cloned {
  display: none;
}

if I don't use external CSS even that problem occurs.

[akiran]

Please create a codesandbox repo with code to replicate this issue and reopen it

[DattebayoVinayak]

Please create a codesandbox repo with code to replicate this issue and reopen it

hey i am having same issue. what about solution. @akiran