javascript - Slick Slider fade true 不适用于垂直 slider

Question

我想使用选项 fade: true 实现一个光滑的垂直 slider 。我想要垂直 slider 中的淡入淡出效果。它显示了第一张幻灯片，但第二张和第三张幻灯片不可见。

下面是我试过的代码。

$('.MySlider').slick({
  vertical: true,
  dots: true,
  infinite: true,
  speed: 500,
  fade: true
});

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<section>
  <div class="MySlider">
    <div class="item">
      <div class="image_container">
        <img src="https://www.placecage.com/600/300" alt="" />
      </div>
    </div>
    <div class="item">
      <div class="image_container">
        <img src="https://www.placecage.com/600/300" alt="" />
      </div>
    </div>
    <div class="item">
      <div class="image_container">
        <img src="https://www.placecage.com/600/300" alt="" />
      </div>
    </div>
  </div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Answer 1

我通过提供自定义 CSS 解决了我的问题。

$('.MySlider').slick({
   dots: true,
   infinite: true,
   speed: 500,
   vertical:true,
   verticalSwiping: true
});

.slick-slide {
   opacity:0;
   transition:opacity 0.5s ease-out;
}

.slick-active {
    opacity:1!important;
    transition:opacity 0.5s ease-in;
    }

.slick-cloned {
    opacity: 0.3;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<section>
   <div class="MySlider">
     <div class="item">
       <div class="image_container">
          <img src="https://www.placecage.com/600/300" alt="" />
       </div>
     </div>
     <div class="item">
       <div class="image_container">
          <img src="https://www.placecage.com/700/300" alt="" />
       </div>
     </div>
     <div class="item">
       <div class="image_container">
          <img src="https://www.placecage.com/800/300" alt="" />
       </div>
    </div>
  </div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>