光滑的垂直滑块问题

Question

我正在尝试实现一个光滑的垂直滑块，如下所示：

在此处输入图像描述

到目前为止，我能接近的是：

在此处输入图像描述

我目前使用的设置是这些：

this.settings = {
slidesToShow: 4,
slidesToScroll: 1,
adaptiveHeight: true,
arrows: true,
vertical: true,
verticalSwiping: true,
centerMode: true,
focusOnSelect: true,
infinite: true
};

}

如果我将变量 slidesToShow 更改为 1，箭头会再次返回，但随后我需要将垂直填充更改为 100%，以便我可以看到所有幻灯片。

诸如此类：

在此处输入图像描述

有没有更简单的方法来显示所有 4 个项目并使它们可以使用箭头滚动？

Answer 1

** 希望这对你有帮助

**

const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
vertical: true,
verticalSwiping: true,
adaptiveHeight:true,
variableHeight:false
};

<Slider
{...settings}
afterChange={(currentSlide) => {
setSlide(currentSlide + 1);
}}
>
{orgData?.map((slider, i) => {
return (
<>
<div className="organization-main-section" key={i}>
<div className="organization-left-content">
<div className="organization-section-content">
<h2>{slider?.Heading}</h2>
<p className='organization-desc'>{slider?.Description}</p>
<ul>
{slider?.List?.map((li, i) => {
return (
<>
<li key={i}>{li?.List}</li>
</>
);
})}
</ul>
<Link to={slider?.MeetneedBtn?.url}>{slider?.MeetneedBtn?.text}</Link>
<div className="quote-box">
<div className="quote-section">
<img src={quoteimg1} alt="quote" />
<p>{slider?.Quates?.Quates}</p>
<img src={quoteimg2} alt="quote" />
</div>
<img
src={slider?.Quates?.Logo[0]?.url}
alt={slider?.Quates?.Logo[0]?.name}
/>
<p>{slider?.Quates?.About}</p>
</div>
</div>
</div>
<div className="organization-right-content">
<div className="organization-section-cover">
<img src={slider?.Img?.url} alt="cover" />
</div>
</div>
</div>
</>
);
})}
</Slider>