代码之家 › 专栏 › 技术社区 › Razvan Zamfir

在我的Flickity carousel版本中添加了“盲板”过渡

carousel css javascript

Razvan Zamfir · 技术社区 · 6 年前

我把 THIS 使用 标题作为控制 ,在 Flickity plugin ,有以下两个选项:

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

注: 滑块上有视频, 不图像。

我需要一个类似于 blinds transition 那个 安东尼。判定元件 旋转木马。

问题:

最简单、最快的方法是什么?这是CSS吗只有
我必须为这个转换编写特定的JavaScript吗?
我宁愿借用JavaScript,我在哪里可以找到一个可读的、未统一的版本?

旋转木马的代码版本是 HERE .

更新: 我添加了一个 partial answer .正如我在回答中所说,我希望我能使用 视频本身 为了过渡。

3 回复 | 直到 5 年前

Ahmed Salama 6 年前

我不确定你想准备什么或者你想编辑你的滑块。

但我们可以编辑任何滑块

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

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

将下一个图像设置为 background-image 给这三个人 潜水艇 .

$(“.animateNextImage div”)。css('background-image','url('+ 下一步是“+”)”;

然后开始为每个背景设置动画,以获得所需的动画效果。

.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/

Razvan Zamfir 6 年前

到目前为止,我已经做了以下工作:

我的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 .