Question

我正在使用光滑的滑块，其功能类似于this [光滑同步滑块]。我无法添加任何动画。我希望图像从左侧显示，文本从右侧显示，如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 和想要自定义转换，你可以使用一点点黑客来做。我已经制作了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）并使用同步滑块（JSFiddle）。要使幻灯片在导航滑块中显示为一张幻灯片，可以使用更多CSS（JSFiddle）。

如何将动画添加到光滑的同步滑块

1 个答案: