failed to implement responsive react slick can anyone solve - reactjs

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;
}