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

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

我使用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>

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,});

解决方法

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

$('#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>
</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>