javascript - 向我的 Flickity 轮播版本添加 "blinds"过渡

Question

我整理了 THIS 在 Flickity plugin 的帮助下，使用字幕作为控件 的 codepen slider (旋转木马) ，有这两个选项:

var flkty = new Flickity(".carousel", {
  pageDots: false,
  wrapAround: true
});

注意: slider 包含视频，不是图像。

我需要一个类似于 blinds transition 的转换 antoni.de 轮播有。

问题:

1. 最简单、最快的方法是什么？它是 CSS 的东西吗 只有？
2. 我是否必须为此转换编写特定的 JavaScript？
3. 我宁愿借用那个 JavaScript，我在哪里可以找到它的可读、未压缩版本？

轮播代码版本为 HERE .

更新:我添加了一个 partial answer 。正如我在回答中所说，我希望我可以使用视频本身来进行过渡。

Answer 1

我不确定您是要准备好东西还是要编辑 slider 。

但我们可以通过

编辑任何 slider

• 获取下一张要显示的图片
• 将包含其他三个 DIV 的 DIV 放在 slider 上。

<div class="animateNextImage">
    <div></div>
    <div></div>
    <div></div>
</div>

• 将下一张图片设置为这三个 DIV 中的每一个的 background-image。

$(".animateNextImage div").css('background-image', "url('"+ nextActiveImg +"')");

然后开始为每个背景制作动画，以实现您想要的动画效果。

.animateNextImage div{
  width: 33.3333%;
  float:left;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -100% 0%;
  transition: background-position 0.5s ease;
}
.animateNextImage.active div:nth-child(1){
  transition-delay: 0.4s;
  background-position: 0% 0%;
}
.animateNextImage.active div:nth-child(2){
  transition-delay: 0.2s;
  background-position: 50% 0%;
}
.animateNextImage.active div:nth-child(3){
  background-position: 100% 0%;
}

在此处查看演示: https://jsfiddle.net/IA7medd/odv4cshm/28/