淡化对Slick旋转木马边缘的影响

时间:2017-02-09 22:14:15

标签: javascript jquery html css css3

我正在使用Ken Wheeler的插件Slick carousel,正如您在下图所示,当幻灯片在边缘滑动时,它看起来像是被切断了。我正在考虑一个“渐弱的边缘”,当滑块在边缘滑动时,它具有“更柔和”的效果。而不是这种突然的幻灯片消失,逐渐(就像一个褪色效果)之一。有没有办法做到这一点?

enter image description here

$('.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>

2 个答案:

答案 0 :(得分:3)

您可以使用background: linear-gradient(); + :before个伪元素与:after非常接近,但是对于任何被覆盖的区域,该链接都无法点击。只需根据需要更新widthrgba()颜色。

<强>更新

为了使链接即使被覆盖也可以点击,您只需将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

答案 1 :(得分:0)

你需要一个褪色模仿的.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;
}