淡淡效果对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