Question

我想淡入淡出缩放滑条的最后一张和第一张幻灯片。我设法做到了，但是当滑块具有“ infinite”设置时，当循环必须重新开始时，它将删除所有“ slick-active”的幻灯片类。问题在于，滑块会在短时间内完全缩小/淡出。

任何人都可以帮助保持所有幻灯片的可见性，但视口中的第一个和最后一个？

谢谢！

Codepen：https://codepen.io/thijs-webber/pen/drNYRo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="references-slider">
      <div class="slide">
        <img src="http://lorempixel.com/250/250" alt="">
      </div>
      <div class="slide">
        <img src="http://lorempixel.com/250/250" alt="">
      </div>
      <div class="slide">
        <img src="http://lorempixel.com/250/250" alt="">
      </div>
      <div class="slide">
        <img src="http://lorempixel.com/250/250" alt="">
      </div>
      <div class="slide">
        <img src="http://lorempixel.com/250/250" alt="">
      </div>
      <div class="slide">
        <img src="http://lorempixel.com/250/250" alt="">
      </div>
      <div class="slide">
        <img src="http://lorempixel.com/250/250" alt="">
      </div>    
    </div>
  </div>
</body>
</html>

<style>
.container{
  max-width: 1000px;
}
.slick-track > div{
  opacity: 0;
  transition: all 400ms ease-out;
  transform: scale(0);
}

.slick-track > div.slick-active{
  opacity: 1;
  transition: all 400ms ease-in;
  transform: scale(1);
}
</style>

<script>
$(document).ready(function(){   
  $('.references-slider').slick({
        autoplay: false,
        arrows: true,
        dots: false,
        slidesToShow: 6,            
    });
});
</script>

光滑的滑块：为视口中的第一项和最后一项设置动画

0 个答案: