将 animation 应用于光滑的幻灯片

Question

I would want to apply the transition between those images to my Slick slide so I can control.我想将这些图像之间的过渡应用到我的 Slick 幻灯片上，以便我可以控制。

The sample of the animation ( Basically a fade and move in the same time ): https://jsfiddle.net/bg90fayo/ animation 的样本（基本上是同时淡入淡出）： https://jsfiddle.net/bg90fayo/

My slick slide: https://jsfiddle.net/L6qjpky4/3/我的光滑幻灯片： https://jsfiddle.net/L6qjpky4/3/

<body>
    
    <div class="my-slide-container">
        
        <div id="top-slider" class="my-slide-wrapper">
            <img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Slide+1">
            <img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Slide+2">
            <img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Slide+3">
        </div>
        
        <div id="bottom-slider" class="my-slide-wrapper">
            <img class="slide slide00 main"  style="animation-delay: 0s;  animation-fill-mode: forwards; opacity:0;" src="https://i.imgur.com/x3dgNKQ.jpg">
            <img class="slide slide01 main"  style="animation-delay: 4s;  animation-fill-mode: forwards; opacity:0; display: block; visibility: visible;" src="https://i.imgur.com/RCOaeIE.jpg">
            <img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Image+3">
        </div>
        
    </div>
    
</body>

CSS CSS

.my-slide-container {
    margin: 30px;
}

.my-slide-wrapper, .my-image-wrapper {
    margin: 0 auto;
    max-width: 300px;
}

img {
    max-width: 300px;
    width: 100%;
}

.slick-dots li {
    margin: 0;
}

.slick-next::before,
.slick-prev::before {
    color: #000;
    opacity: 1;
}

.my-image {
    visibility: hidden;
    position: absolute;
}

#myImage00 {
    visibility: visible;
}

.im-hiding {
    visibility: hidden;
}

.im-showing {
    visibility: visible;
}

  @keyframes fade-in-move-down {
    0% {
      opacity: 0;
      transform: translateX(2rem);
    } 
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
    .main{
    animation: fade-in-move-down 1.2s;
    top: 0;
    left: 0;
    display: block;
    visibility: visible;
  }
  
    .slide .slick-active img{
        visibility: visible;
    }

JS JS

$(document).ready(function () {
    $('#top-slider').slick({
        asNavFor: '#bottom-slider',
        dots: true,
        infinite: false,
        speed: 1,
        slidesToShow: 1,
        slidesToScroll: 1
    });
    
    $('#bottom-slider').slick({
        arrows: false,
        dots: false,
        fade:true,
        draggable: false,
        infinite: false,
        speed: 1,
        slidesToShow: 1,
        slidesToScroll: 1,
        waitForAnimate: false,
    });
    
});

The wanted transition between the slides:幻灯片之间想要的过渡：

body{
  background-color:black;
}
  
  
  @keyframes fade-in-move-down {
    0% {
      opacity: 0;
      transform: translateX(2rem);
    } 
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
    .main{
    animation: fade-in-move-down 1.2s;
    top: 0;
    left: 0;
    display: block;
    visibility: visible;
  }

Thank you.谢谢你。

Answer 1

You can do that with slick parameters:你可以用光滑的参数做到这一点：

$('#top-slider').slick({
  asNavFor: '#bottom-slider',
  dots: true,
  infinite: false,
  speed: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToShow: 1,
  slidesToScroll: 1
});

You can adjust it for you needs - read more here .您可以根据需要对其进行调整 -在此处阅读更多信息。

Edit as per comment:根据评论编辑：

You need to set animation to the active slide selector:您需要将 animation 设置为活动滑动选择器：

.slick-active { animation: fade-in-move-down 1.2s; }

In order to set the animation only to the second slider you can:为了将 animation 仅设置为第二个 slider，您可以：

#bottom-slider .slick-active { animation: fade-in-move-down 1.2s; }

将 animation 应用于光滑的幻灯片

问题描述

1 个解决方案

解决方案1
0 2020-08-16 22:18:06

将 animation 应用于光滑的幻灯片

问题描述

1 个解决方案

解决方案1 0 2020-08-16 22:18:06

解决方案1
0 2020-08-16 22:18:06