Question

在 {{3}的帮助下，我整理了使用字幕作为控件的 THIS 代码笔滑块（轮播） } ，并具有以下两个选项：

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

注意：滑块包含视频，不是图像。

我需要一个类似于antoni.de轮播的 Flickity plugin 的过渡。

问题：

最简单，最快的方法是什么？这是CSS的东西吗只有吗？
此过渡是否需要编写特定的JavaScript？
我宁愿借用该JavaScript，在哪里可以找到它的可读性，最小化版本？

轮播的代码版本为 blinds transition 。

更新：我添加了 HERE 。就像我在回答中说的那样，我希望可以使用视频本身进行过渡。

Answer 1

我不确定您准备好准备什么还是要编辑滑块。

但是我们可以通过

编辑任何滑块

获取将要显示的下一张图片
将包含其他三个DIV的{{1}}放在滑块上。

DIVs

将下一个图像设置为这三个<div class="animateNextImage"> <div></div> <div></div> <div></div> </div>中的每个图像的background-image。

$（“。animateNextImage div”）。css（'background-image'，“ url（'” + nextActiveImg +“'）”）;

然后开始为每个背景设置动画，以实现所需的动画。

DIVs

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

Answer 2

我不确定此滑块，但是，对于盲滑块，我还有其他解决方案。请参阅下面的插件。

解决方案1：https://github.com/stathisg/blindify

解决方案2：http://www.hislider.com/faq/how-to-add-blind-fade-and-both-transitions-in-my-jquery-image-gallery-slider.html

Answer 3

直到现在我已经完成以下操作：

我的HTML：

<div id="full_slider" class="carousel">
  <div class="item">
    <div class="bg">
      <video muted loop autoplay>
        <source type="video/mp4" src="video/eroi.mp4"></source>
      </video>
      <div class="photo"><img src="img/agentie_full_service.png" alt="Agentie full-service"></div>
      <div class="cover">
        <div class="third"></div>
        <div class="third"></div>
        <div class="third"></div>
      </div>
    </div>
    <div class="content">
      <h1>Lorem ipsum dolor</h1>
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <video muted loop autoplay>
        <source type="video/mp4" src="video/meda.mp4"></source>
      </video>
      <div class="photo"><img src="img/strategeie_de_brand.png" alt="Strategie de brand"></div>
      <div class="cover">
        <div class="third"></div>
        <div class="third"></div>
        <div class="third"></div>
      </div>
    </div>
    <div class="content">
      <h1>Lorem ipsum dolor</h1>
    </div>
  </div>
</div>

我的CSS：

#full_slider .item .bg .cover {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     opacity: 1;
     transition: opacity 0.2s 1s ease;
}
 #full_slider .item .bg .cover div {
     position: absolute;
     top: 0;
     width: 33.3333%;
     height: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: -100% 0%;
     transition: background-position 0.5s ease;
}
 #full_slider .item.is-selected .cover {
     opacity: 0;
}
 #full_slider .item.is-selected .cover > div:nth-child(1) {
     left: 0;
     transition-delay: 0.5s;
     background-position: 0% 0%;
}
 #full_slider .item.is-selected .cover > div:nth-child(2) {
     left: 33.3333%;
     transition-delay: 0.25s;
     background-position: 50% 0%;
}
 #full_slider .item.is-selected .cover > div:nth-child(3) {
     left: 66.6666%;
     background-position: 100% 0%;
}

我的jQuery：

$('#full_slider').find('.photo').each(function(){
  var imgContainer = $(this),
  bkImg = imgContainer.find('img').attr('src');
  imgContainer.next().find('div').css("background-image", 'url("'+ bkImg +'")');
});

可以在 here 上看到此代码的结果。

我希望我不必将图像用作视频的“封面”，我希望可以将视频本身用于过渡。我正在寻找类似 this one 的效果。

在我的Flickity轮播版本中添加“百叶窗”过渡

3 个答案: