如何制作这样的滑块

Posted 2023-05-07

【中文标题】如何制作这样的滑块

【英文标题】：How to make slider like this

【发布时间】：2021-12-22 13:06:38

【问题描述】：

Slider template

我正在使用一个光滑的滑块并尝试使用 CenterMode 进行此操作，但我不知道如何使其他图片看起来像这样。 我应该使用伪元素还是什么？

【问题讨论】：

这就是你要找的东西：[SO Carousel Slider] - ***.com/questions/20346847/…

请将您目前拥有的代码放入您的问题中。见***.com/help/minimal-reproducible-example

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

【参考方案1】：

在单个幻灯片 html 中，您可以添加一个元素，并将该元素设置为绝对样式，并覆盖整个幻灯片。

然后您希望将活动幻灯片中的叠加层的不透明度设置为 0，以突出显示当前幻灯片（隐藏当前幻灯片的叠加层）。 SlickJs 为当前幻灯片提供“slick-current”类（不带引号）。然后，您可以执行以下操作：

/* Make sure the overlay will be placed inside the box */
.your-slider .slick-slide 
   position: relative;


.your-slider .slick-slide .overlay 
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,.8);


.your-slider .slick-slide.slick-current .overlay 
   opacity: 0;