带有烂掉图像的光滑滑块会跳出错误

Question

幻灯片动画（比例尺（1.3）至比例尺（1））完成并移回幻灯片后，我得到了这一烦人的跳跃。

我希望每个活动幻灯片都已经按比例缩放（1.3）而没有跳转。

  $('.home-slider').slick({
     slidesToScroll: 1,
        slidesToShow: 1,
        //arrows: true,
        autoplay: true,
        autoplaySpeed: 7000,
        dots: false
  })

body,
html {
  height: 100%;
  background: #333;
  font-family: 'Roboto', sans-serif;
}

.slideshow {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  margin: 50px auto;
}

.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}
.slideshow .item img {
  width: 100%;
  
}
.slideshow .item.slick-active img {
  -webkit-animation: ken-burns-out 8s 1 ease-in-out forwards;
  animation: ken-burns-out 8s 1 ease-in-out forwards;
}


/*//The animation: from 1.3 scale to 1*/
@-webkit-keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>





<div class="slideshow">
  <div class="home-slider">
    <div class="item">
      <img src="https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=978&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
    </div>
  </div>
</div>

Answer 1

发生问题是因为所有图像都具有相同的z-index。

当您从第一张幻灯片浏览到最后一张幻灯片（向右幻灯片）时，我的代码不起作用，但这是从头开始的。

首先，从以下选择器中删除z-index：.slideshow .item。

然后，将变换添加到每个图像，以使每个图像以此比例开始（也许将类名添加到每个图像，然后更改选择器）：

img {
  transform: scale(1.3);
}

添加一个按索引获取平滑功能（存在克隆的平滑元素，因此我使用了获取未克隆的平滑的选择器）：

function getSlickByIndex(index) {
  return $('.item:not(.slick-cloned)[data-slick-index="' + index + '"]');
}

然后，添加init事件（逻辑使第一张幻灯片获得zIndex = 0的所有同胞中更大的zIndex = 1），以及beforeChange（逻辑使下一张幻灯片滑动以获取较大的索引，而其他则获取较小的索引）：

$('.home-slider').on('init', function(event, slick){
  getSlickByIndex(0).css('zIndex', '1');
}).on('beforeChange', function(event, slick, currentSlide, nextSlide){
  getSlickByIndex(currentSlide).css('zIndex', '0');
  getSlickByIndex(nextSlide).css('zIndex', '1');
});

这是一个有效的小提琴：https://codepen.io/alonsh/pen/JQmZjj

Answer 2

您的图像以1的比例开始，然后当它们变为活动状态时，动画将在1.3处将其开始，这就是导致跳转的原因。您需要做的是将所有图像添加到scale(1.3) CSS定义中，以.item img开始。 仅这样做会导致图像彼此溢出。为了解决这个问题，请通过添加.item来确保每个overflow: hidden的内容不会溢出：

编辑

这会导致代码仍然无法正常工作。我们仍然需要上一个答案中的所有内容，但最终遇到了相反的问题，即关闭图像后图像会跳到完全缩放的大小。

这有点像个兔子洞，但是css中有一个animation-play-state属性，我们可以使用该属性在项目变为非活动状态时暂停动画，因此我使动画播放在每个.item元素上，这意味着当滚动它并丢失活动的类时，它将在原处暂停动画。

这几乎可以使我们获得所需的结果，但是当图像重新显示时，它将从中断的位置恢复。事实证明，没有一种让css动画重新启动的好方法，所以我正在做的是绑定到幻灯片更改事件以实现滑动和更改幻灯片时（我相信只能保证活动的幻灯片可见）。我重置了.item动画。为了不中断活动幻灯片，我添加了一个类.animated，可以将其删除，然后稍后再添加到setTimeout中。需要延迟才能使动画重新开始。

您希望这就是结局，但是您会错的。然后，Slick认为开始滑动，然后再次滑回到同一张图片上就是一次幻灯片更改（“更改”），因此我添加了一个当前的幻灯片变量来跟踪我们正在播放的幻灯片，并仅重置.animated幻灯片是否确实发生了变化。 重要注意事项：在真实的项目中，我会将此currentSlide包装在某种类/对象中以跟踪单个幻灯片的状态，因为就目前而言，您不能在一页上进行一次幻灯片演示，而不会受到干扰。但是我不会为一个简单的例子编写所有内容。

所有这些之后，我们最终得到了稍微不同的CSS和更多的JS来获得有效的结果：

$('.home-slider').slick({
  slidesToScroll: 1,
  slidesToShow: 1,
  //arrows: true,
  autoplay: true,
  autoplaySpeed: 7000,
  dots: false
});
var currentSlide = 0;
$('.home-slider').on('afterChange', function(event, slick, newSlide){
  var items = $('.home-slider .item');
  if(currentSlide != newSlide){
    currentSlide = newSlide;
    items.removeClass('animated');
    setTimeout(function(){
      items.addClass('animated');
    });
  }
});

body,
html {
  height: 100%;
  background: #333;
  font-family: 'Roboto', sans-serif;
}

.slideshow {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  margin: 50px auto;
}

.slideshow .item {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.slideshow .item img {
  width: 100%;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.slideshow .item.animated img {
  -webkit-animation: ken-burns-out 8s 1 ease-in-out forwards;
  animation: ken-burns-out 8s 1 ease-in-out forwards;
  animation-play-state: paused;
}
.slideshow .item.slick-active img {
  animation-play-state: running;
}


/*//The animation: from 1.3 scale to 1*/
@-webkit-keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>





<div class="slideshow">
  <div class="home-slider">
<div class="item animated">
  <img src="https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=978&q=80" />
</div>
<div class="item animated">
  <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
</div>
  </div>
</div>