英文:
Why is my react slick carousel responsiveness not working?
问题
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",
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",
width: "25px",
height: "25px",
};
return (
<div className={className} style={updatedStyle} onClick={onClick} />
);
}
export default function SimpleSlider({ slides, slidesToShow, centerPadding }) {
var settings = {
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 was trying to implement this react slick carousel to my Next.js project, but for some reason, the responsiveness isn't working. Whenever I reduce my screen size to mobile view (let's say 480px), it vanishes from the position it's supposed to be, and instead, when I increase the size, it starts displaying all slides at once.
Here is the component call:
<Test2
slides={slideData}
slidesToShow={1}
centerPadding="300px"
/>
英文:
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 was trying to implement this react slick carousel to my Next JS project but for some reason, the responsiveness isn't working
whenever I low my screen size for mobile view (lets say 480px) it vanishes from the position its supposed to and instead when I increase size, it starts displaying all slides at once
here is the component call
<Test2
slides={slideData}
slidesToShow={1}
centerPadding="300px"
/>
`
答案1
得分: 0
看起来你应该像这样修改你的设置。
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,
centerPadding: "50px", // 在较小的屏幕上添加这一行以减少 centerPadding
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
centerPadding: "0px", // 在最小的屏幕上添加这一行以移除 centerPadding
},
},
],
英文:
It seems you should modify your settings like this.
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,
centerPadding: "50px", // Add this line to reduce centerPadding for smaller screens
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
centerPadding: "0px", // Add this line to remove centerPadding for smallest screens
},
},
],
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论