如何制作这样的滑块

Question

Slider template

我正在使用 slick-slider 并尝试使用 CenterMode 来实现这一点，但我不知道如何使其他图片看起来像这样。我应该使用伪元素还是什么？

Answer 1

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

然后您想为活动幻灯片中的叠加层提供 0 的不透明度，以突出显示当前幻灯片（隐藏当前幻灯片的叠加层）。 SlickJs 为当前幻灯片提供 class "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;
}

如何制作这样的滑块

How to make slider like this

html

css

slider

slick.js