failed to implement responsive react slick can anyone solve

Question

explain the problem here..,whats is problem here,i want to make my slick responsive

 const settings = {
        centerMode: true,
        centerPadding: '10px',
        slidesToShow: 5,
        speed: 500,
        slidesToScroll: 1,
        arrows: true,
        dots: false,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              arrows: false,
              slidesToShow: 3,
            },
          },
          {
            breakpoint: 480,
            settings: {
              arrows: false,
              slidesToShow: 1,
            },
          },
        ],
      };

import React from "react";
import Ddata from "./Ddata";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
const DCard = () => {
    const settings = {
        centerMode: true,
        centerPadding: '10px',
        slidesToShow: 5,
        speed: 500,
        slidesToScroll: 1,
        arrows: true,
        dots: false,
        responsive: [
          {
            breakpoint: 768,
            settings: {
              arrows: false,
              slidesToShow: 3,
            },
          },
          {
            breakpoint: 480,
            settings: {
              arrows: false,
              slidesToShow: 1,
            },
          },
        ],
      };
    
    return (
        <>
                  <Slider {...settings}>

                {Ddata.map((val, index) => {
                    return (
                        <>
                        <div className='product' key={index}>
                            <div className="box">
                            <div className='img'>
                                <img src={val.cover} alt='' width='100%'/>
                            </div>
                            <h4>{val.name}</h4>
                            <span>${val.price}</span>
                        </div>
                        </div>
                        </>
                    )
                })}
            </Slider>
        </>
    )
}
export default DCard```

Answer 1

Here is the solution. I have code your problem. It might help you just have a look. Thank You for the consideration :)

App.js

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

import "./App.css";
const Ddata = [
  {
    id: 1,
    cover:
      "https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
    name: "car",
    price: "10000",
  },
  {
    id: 2,
    cover:
      "https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
    name: "car",
    price: "10000",
  },
  {
    id: 3,
    cover:
      "https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
    name: "car",
    price: "10000",
  },
  {
    id: 4,
    cover:
      "https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
    name: "car",
    price: "10000",
  },
  {
    id: 5,
    cover:
      "https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
    name: "car",
    price: "10000",
  },
  {
    id: 6,
    cover:
      "https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
    name: "car",
    price: "10000",
  },
];
function App() {
  const settings = {
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 4,
    arrows: false,
    responsive: [
      {
        breakpoint: 320,
        settings: { slidesToShow: 1, slidesToScroll: 1, infinite: false },
      },
      {
        breakpoint: 768,
        settings: { slidesToShow: 2, slidesToScroll: 2, infinite: false },
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true,
        },
      },
      {
        breakpoint: 2080,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4,
          infinite: true,
          dots: true,
        },
      },
    ],
  };
  return (
    <div className='container'>
      <Slider {...settings}>
        {Ddata.map((val, i) => (
          <div key={val.id}>
            <div className='card'>
              <img src={val.cover} alt={val.name} />
              <h4>{val.name}</h4>
              <p>{val.price}</p>
            </div>
          </div>
        ))}
      </Slider>
    </div>
  );
}

export default App;

App.css

body {
  padding-top: 40px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.slick-slider {
  margin: 30px auto 50px;
  width: auto;
}

h3 {
  background: #00558b;
  color: #fff;
  line-height: 100px;
  text-align: center;
  font-size: 36px;
  margin: 10px;
  padding: 2%;
  position: relative;
}

.card {
  padding: 8px;
  position: relative;
  margin: 15px;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
  border-top: 6px solid #d8d8d8;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  text-align: center;
}
.card img {
  width: 250px;
}
.card:hover {
  border-top: 6px solid #0080ad;
  cursor: pointer;
  transform: translateY(0px);
}
.card h4 {
  text-transform: uppercase;
  color: #3e4042;
}
.card p {
  line-height: 1.5;
}
.slick-prev {
  background: black;
}

.slick-next {
  background: black;
}
.slick-dots li {
  margin: 0 16px;
}
.slick-dots li button:before {
  content: " ";
  background: #d8d8d8;
  opacity: 1;
  height: 4px;
  width: 40px;
}
.slick-dots li.slick-active button:before {
  content: " ";
  background: #0080ad;
  opacity: 1;
  height: 4px;
  width: 40px;
}