如何防止旋转木马内容显示在另一个顶部

Question

我想在旋转木马中显示一些卡片。对于旋转木马，我用的是反应滑溜。因为我想在中心显示一张卡片，我也想在旋转木马的末端显示其他卡片的部分，我设置了centerMode: true并添加了centerPadding:300px。问题是，当我缩小屏幕尺寸时，卡片相互重叠，看起来很糟糕。我如何保持旋转木马的布局，并确保无论屏幕大小，卡片之间总是有一定的空间?

import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
const settings = {
dots: true,
infinite: true,
speed: 500,
centerMode: true,
centerPadding: '300px',
slidesToShow: 1,
slidesToScroll: 1,
}
return (
<div style={{height: '400px', margin: '100px 10%'}}>
<Slider {...settings}>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
</Slider>
</div>
)

Answer 1

而不是使用px，这是一个固定设置的值，你可以使用vw，这是viewport宽度的缩写。假设你将其设置为10vw，这意味着正在加载应用程序的设备宽度的10%将成为你正在使用它的组件的大小。还有vh，是视口高度的缩写。

Answer 2

var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: 300px
responsive: [
{
breakpoint: 1024,
settings: {
centerPadding: 150px
}
},

你可以添加响应属性，并减少一半的中心填充或任何你想要和舒适。您可以在768中使用其他对象值对设置另一个响应属性。