javascript - 弹出式旋转木马 - 显示 3 张不同透明度的幻灯片

Question

<分区>

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>