https://i.sstatic.net/Qv0Pg.jpg
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from "next/link";
function SampleNextArrow(props) {
const { className, style, onClick } = props;
const updatedStyle = {
...style,
display: "block",
background: "grey",
padding: "3px",
// borderRadius: "50%",
width: "25px",
height: "25px",
};
return (
<div
className={className}
style={updatedStyle}
onClick={onClick}
/>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
const updatedStyle = {
...style,
display: "block",
background: "grey",
padding: "3px",
// borderRadius: "50%",
width: "25px",
height: "25px",
};
return (
<div
className={className}
style={updatedStyle}
onClick={onClick}
/>
);
}
export default function SimpleSlider({ slides, slidesToShow, centerPadding }) {
var settings = {
// className: "center",
dots: true,
infinite: true,
speed: 2000,
arrows: true,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: slidesToShow,
pauseOnHover: true,
centerMode: true,
centerPadding: centerPadding,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true,
arrows: false,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2,
arrows: false,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
}
}
],
appendDots: (dots) => (
<ul
style={{
display: "inline-block",
margin: "0 5px",
padding: "5px",
borderRadius: "25%",
cursor: "pointer",
}}
>
{dots}
</ul>
),
};
return (
<>
<Slider {...settings} className="mb-10 rounded-xl relative">
{slides.map((slide) => (
<div className="h-[16rem] py-[1rem] px-[0.25rem]" key={slide.id}>
<Link href={slide.link}>
<img
className="w-full rounded-xl hover:scale-110"
src={slide.backdrop_path}
alt={`slide ${slide.id}`}
/>
</Link>
</div>
))}
</Slider>
</>
);
}
I'm facing an issue implementing the react slick carousel in my Next JS project. The responsiveness is not working as expected. When I resize the screen to a mobile view (e.g., 480px), it disappears from its correct position and displays all slides at once when I increase the size.
Here is how I call the component:
<Test2
slides={slideData}
slidesToShow={1}
centerPadding="300px"
/>
`