javascript - 如何将动画添加到光滑的同步 slider

Question

我正在使用具有类似于 this 功能的光滑 slider [流畅的同步 slider ]。我无法为其添加任何动画。我希望图像从左侧出现，文本从右侧出现，如 this-second slide .

我尝试添加 animate.css 并使用 data-animated="fadeInLeft"，但这是同时加载所有幻灯片，最重要的是，它没有达到目的。

有没有可以使用 JS 或 CSS 添加动画的选项？

$('.slider-quote-block').slick({ 
	    slidesToShow: 1,
	    slidesToScroll: 1,
	    arrows: false,
	    fade: true,
	    asNavFor: '.slider-image-block' 
	});
	$('.slider-image-block').slick({
	    slidesToShow: 1,
	    slidesToScroll: 1,
	    asNavFor: '.slider-quote-block',
	    dots: false
    });

.testimonial {
	img {
		position:relative;
	}
	figcaption {
		position: absolute;
		bottom: 35px;
		left:0px;
		z-index: 1;
		h5 {
			color: white;
			font-size: 16px;
			padding: 0px 38px;
			position: relative;
			display: inline-block;
			font-size: 22px;
			font-family: $font-stack;
			&:last-child {
				font-size: 22px;
				font-family: $font-arial;
				padding-left:15px;
				&:before {
					content: "";
					position: absolute;
					background-color: $cabaret;
		   		    top: -5px;
    				left: -13px;
    				height: 35px;
    				width: 3px;
				}
			}
		}
	}
}
.slider-image-block, .slider-quote-block {
	width:50%;
	float:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="testimonial clearfix">
      <!--image-->
      <div class="slider-image-block">
        <div class="image-overlay">
          <img src="images/testimonial1.png" alt="slider-image 1">
          <figcaption><h5>name</h5><h5>designation</h5></figcaption>
        </div>
        <div class="image-overlay">
          <img src="images/testimonial1.png" alt="slider-image 2">
          <figcaption><h5>name</h5><h5>designation</h5></figcaption>
        </div>
        <div class="image-overlay">
          <img src="images/testimonial1.png" alt="slider-image 3">
           <figcaption><h5>name</h5><h5>designation</h5></figcaption>
        </div>
        <div class="image-overlay">
          <img src="images/testimonial1.png" alt="slider-image 4">
           <figcaption><h5>name</h5><h5>designation</h5></figcaption>
        </div>
        <div class="image-overlay">
          <img src="images/testimonial1.png" alt="slider-image 5">
          <figcaption><h5>name</h5><h5>designation</h5></figcaption>
        </div>
      </div>
      <!--quote-->
      <div class="slider-quote-block">
        <div class="blockquote">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p> 
        </div>
        <div class="blockquote">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p> 
        </div>
        <div class="blockquote">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p> 
        </div>
        <div class="blockquote">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p> 
        </div>
        <div class="blockquote">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p> 
        </div>
      </div>     
    </section>

Answer 1

据我所知，Slick 中没有使用自定义动画或过渡的内置选项。你可以就此提出一个问题，尽管我不确定作者是否愿意支持这一点。

无论如何，我发现如果您真的想使用 Slick 并且想要自定义过渡，您可以使用一些 hack 来实现。我编了一个JSFiddle这证明了这一点。希望这就是您想要的？

为了让幻灯片的一部分从一侧进入，一部分从另一侧进入，我使用了 Slick 中的选项一次步进两张幻灯片。在自定义事件监听器中，然后为这两张幻灯片提供不同的动画以实现您正在寻找的效果。

相关代码是下面的事件监听器。

var slides = $('.slide');
$('.slick').slick({
  infinite: true,
  slidesToShow: 2,
  slidesToScroll: 2,
  speed: 0 // hack to disable Slick transitions
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  slides.removeClass('slideInLeft slideInRight');
  // use custom transition
  slides.eq(nextSlide).addClass('slideInLeft');
  slides.eq(nextSlide + 1).addClass('slideInRight');
});

它是通过将速度设置为 0 来禁用 Slick 转换并在事件监听器中应用自定义转换的组合。 AFAIK，目前没有办法以更好的方式禁用转换，但这当然更可取。另一种选择是根本不使用 Slick，但我将其留给您来决定。

编辑:根据评论中的请求，也可以更改动画速度(JSFiddle)和使用同步 slider (JSFiddle)。要使幻灯片在导航 slider 中显示为一张幻灯片，可以使用更多 CSS ( JSFiddle )。