Javascript 带有ken burns out图像的光滑滑块

在幻灯片动画（缩放（1.3）到缩放（1））完成并移回幻灯片后，我得到了这个恼人的跳跃。

我希望每个活动幻灯片都已按比例（1.3）显示，而无需跳转

$（'.home slider'）。光滑({
幻灯片滚动：1，
幻灯片放映：1，
//箭头：是的，
自动播放：对，
自动播放速度：7000，
圆点：错
})

body，
html{
身高：100%；
背景：#333；
字体系列：“Roboto”，无衬线；
}
.幻灯片放映{
位置：相对位置；
z指数：1；
身高：100%；
最大宽度：700px；
保证金：50px自动；
}
.幻灯片.项目{
身高：100%；
位置：相对位置；
z指数：1；
}
.幻灯片.项目img{
宽度：100%；
}
.slideshow.item.slick-active img{
-webkit动画：ken耗尽8s1缓进缓出向前；
动画：肯耗尽了8秒1的快进快退向前；
}
/*//动画：从1.3缩放到1*/
@-webkit关键帧ken烧坏了{
0% {
-webkit转换：规模（1.3）；
变换：比例（1.3）
}
到{
-webkit转换：规模（1）；
变换：缩放（1）
}
}
@关键帧肯烧坏了{
0% {
-webkit转换：规模（1.3）；
变换：比例（1.3）
}
到{
-webkit转换：规模（1）；
变换：缩放（1）
}
}

---

发生此问题的原因是所有图像都具有相同的z索引

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

首先，从该选择器中删除z索引：

.slideshow.item

然后，将变换添加到每个图像，以便每个图像以该比例开始（可能为每个图像添加类名，然后更改选择器）：

添加一个函数以按索引获取slick（有克隆的slick元素，因此我使用获取未克隆的slick的选择器）：

然后，添加

init

事件（逻辑生成第一张幻灯片，以获得所有zIndex=0的同级中较大的zIndex=1），并在更改之前添加

（逻辑生成下一张幻灯片，以获得较大的索引，其他幻灯片以获得较小的索引）：

演示

img{
转换：比例（1.3）；
}
身体，
html{
身高：100%；
背景：#333；
字体系列：“Roboto”，无衬线；
}
.幻灯片放映{
位置：相对位置；
z指数：1；
身高：100%；
最大宽度：700px；
保证金：50px自动；
}
.幻灯片.项目{
身高：100%；
位置：相对位置；
z指数：1；
}
.幻灯片.项目img{
宽度：100%；
}
.slideshow.item.slick-active img{
-webkit动画：ken耗尽8s1缓进缓出向前；
动画：肯耗尽了8秒1的快进快退向前；
}
/*//动画：从1.3缩放到1*/
@-webkit关键帧ken烧坏了{
0% {
-webkit转换：规模（1.3）；
变换：比例（1.3）
}
到{
-webkit转换：规模（1）；
变换：缩放（1）
}
}
@关键帧肯烧坏了{
0% {
-webkit转换：规模（1.3）；
变换：比例（1.3）
}
到{
-webkit转换：规模（1）；
变换：缩放（1）
}
}

函数getSlickByIndex（索引）{
返回$（'.item:not（.slick cloned）[data slick index=“'+index+']”数据平滑索引]；
}
$（'.home slider'）。on（'init'，函数（事件，滑动）{
getSlickByIndex（0.css（'zIndex'，'5555'）；
}).on（'beforeChange'，函数（事件、滑动、当前滑动、下一滑动）{
getSlickByIndex（currentSlide）.css（'zIndex'，'0'）；
getSlickByIndex（nextSlide）.css（'zIndex'，'5555'）；
});
$（'.home slider'）。光滑({
幻灯片滚动：1，
幻灯片放映：1，
//箭头：是的，
自动播放：对，
自动播放速度：7000，
圆点：错
});
您的图像以1的比例开始，然后当它们变为活动状态时，动画将以
1.3开始，这就是导致跳跃的原因。您需要做的是，通过将其添加到
.item img
css定义中，以
比例（1.3）
启动所有图像。
仅这样做会导致图像彼此溢出。要解决此问题，请确保每个
.item
的内容不会溢出，方法是添加
溢出：隐藏
，从而导致：

编辑

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

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

这几乎可以让我们达到预期的效果，但当图像重新进入视图时，它会从停止的位置恢复。事实证明，没有一种很好的方法可以让css动画重新启动，所以我要做的是为slick绑定幻灯片更改事件，当幻灯片发生更改时（我相信这保证只有活动幻灯片可见），我会重置
.item
动画。为了以不中断活动幻灯片的方式完成此操作，我添加了一个类
.animated
，我可以将其删除，然后在以后的
设置超时中重新添加。需要延迟才能重新启动动画

你希望这就是结局，但你错了。然后，Slick将启动的滑动视为幻灯片更改（“更改”），因此我添加了一个当前幻灯片变量，以跟踪我们正在播放的幻灯片，并且仅在幻灯片确实播放时重置
.animated
类
img {
  transform: scale(1.3);
}

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

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