淡化对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;
}