错误中心模式 Slick.js 在四中心幻灯片中添加不透明度

Question

我使用 Slick.js 创建了一个滑块，我正在使用 centerMode: true。我想让幻灯片左右两侧的幻灯片透明，不透明度为 0.5，但效果不如下图

我希望我的滑块看起来像这样：

*上图，我用光标按住滑块，想表达的意思。

如果slideToShow: 3可以合适。但我想要 4 张中间带有 opacity: 1 的幻灯片。我该如何解决这个问题？

这是我的Codepen

HTML

<div id="artSlider">
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
</div>

SCSS

.item{
  background-color:#16B345;
  margin:0 5px;
  padding: 40px 20px;
}

#artSlider{
  .item{
    &.slick-slide{
        opacity: 0.5;

        &.slick-active{
            opacity: 1;
        }
    }
  }
}

JS函数

 $('#artSlider').slick({
    // autoplay: true,
       centerMode: true,
       centerPadding: '100px',
       slidesToShow: 4,
       arrows: false,
       dots: false,
 });

Answer 1

如果您删除中心模式，您可以通过添加和外部容器来实现它，它将控制您的 4 张幻灯片的宽度（示例宽度为 600 像素）

$('#artSlider').slick({
       slidesToShow: 4,
       arrows: false,
       dots: false,
 });

.item {
  background-color: #16B345;
  margin: 0 5px;
  padding: 40px 20px;
}

.slider-container {
  max-width: 600px;
  margin: 0 auto;
}

.slider-container .slick-list {
  overflow: visible;
}

#artSlider .item {
  transition: opacity .2s
}

#artSlider .item.slick-slide {
  opacity: 0.43;
}

#artSlider .item.slick-active {
  opacity: 1;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />



<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div class="slider-container">
  <div id="artSlider">
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

错误中心模式 Slick.js 在四中心幻灯片中添加不透明度

Error center mode Slick.js to add opacity in four center slide

javascript

css

slider

slick.js