弹出窗口上的旋转木马 - 显示3个不同混浊的幻灯片

Question

我创建了一个图像列表，当您点击其中一个图像时，会弹出一个视频轮播。

一切都按预期工作，除了我想同时显示视频轮播的3张幻灯片，其中活动幻灯片（中间的一张）是不透明度1而另外两张（左右两边） ）是不透明度0.5。

你能帮帮我吗？

这就是它的工作原理：https://codepen.io/sonder15478/pen/QvVPMq

See codepen link

以下是我对不透明度的看法以及我希望旋转木马看起来的图像：

Answer 1

除了.slick-slide之外，您所要做的就是让所有0.5具有.slick-current不透明度。

.slick-slide {
  opacity: 0.5;
}

.slick-current {
  opacity: 1;
}

$(".slider").slick({
  dots: true,
  infinite: true,
  centerMode: true,
  slidesToShow: 3,
  variableWidth: true
 });

img {
  margin: 0 30px;
}

.slick-slide {
  opacity: 0.5;
}

.slick-current {
  opacity: 1;
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<section class="slider">
  <img src="http://placehold.it/250x150?text=1">
  <img src="http://placehold.it/250x150?text=2">
  <img src="http://placehold.it/250x150?text=3">
  <img src="http://placehold.it/250x150?text=4">
</section>