Slick 轮播边缘的淡入淡出效果

Question

我正在使用 Ken Wheeler 的插件 Slick carousel，如下图所示，当幻灯片在边缘滑动时，它看起来像是被切断了。我正在考虑“褪色边缘”，其中当幻灯片在边缘滑动时，它具有“更柔和”的效果。而不是这种突然的幻灯片消失，一种渐进的（就像淡入淡出效果）。有什么办法吗？

$('.carousel').slick({
  arrows: false,
  autoplay: true,
  autoplaySpeed: 1000,
  speed: 2000,
  slidesToShow: 5,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 4
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2
      }
    }
  ]
});

.container {
  padding: 40px;
  background-color: blue;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="main.js"></script>
<div class='container'>
  <div class='carousel'>
    <div>
      <a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
    </div>
    <div>
      <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
    </div>
  </div>
</div>

Answer 1

您可以使用background: linear-gradient(); 和:before + :after 伪元素非常接近，但链接将无法点击任何区域被覆盖。只需根据需要更新 width 和 rgba() 颜色即可。

更新：

为了使链接即使被覆盖也可点击，您只需将pointer-events: none; 添加到伪元素即可。

.carousel:before,
.carousel:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  top: 0;
  height: 100%;
  pointer-events: none; /*makes the linkes behind clickable.*/
}
.carousel:before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.carousel:after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

jsFiddle

Answer 2

您需要一个 .png 图像，该图像具有褪色模拟，以便透明度从 0% 变为 70%

然后在容器内添加两次img第二次img应该水平翻转

css

.container img {
position: absolute;
height: 100%;
z-index: 1;
}
/* selects the first img */
.container .img1 {
float: left;
left: 0;
}
/* selects the second img */
.container .img2 {
float: right;
right: 0;
}