添加"百叶窗"过渡到我的Flickity轮播版本

Question

我已经把这个使用字幕作为控件的 codepen滑块(carousel)放在一起,在Flickity插件的帮助下,有以下2个选项:

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

注意:滑块包含视频,而不是图像.

我需要一个类似于antoni.de carousel所具有的百叶窗过渡的过渡.

问题:

1. 什么是最简单,最快速的方法？它只是一个CSS的东西吗？
2. 我是否必须为此过渡编写特定的JavaScript？
3. 我宁愿借用JavaScript,在哪里可以找到一个可读的,未经说明的版本？

旋转木马的代码版本在这里.

更新:我添加了部分答案.正如我在答案中所说,我希望我可以将视频本身用于过渡.

Answer 1

我不确定您是否想要准备好东西，或者您想要编辑您的滑块。

但是我们可以通过以下方式编辑任何滑块

• 获取将显示的下一个图像
• 将DIV包含其他三个的DIVs放在滑块上。

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

• 将下一个图像设置background-image为这三个中的每一个DIVs。

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

然后开始为每个背景设置动画以实现您想要的动画。

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

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