滑らかな同期スライダーにアニメーションを追加する方法

Question

[Slick syncスライダー]と同様の機能を持つ滑らかなスライダーを使用しています。私はそれにアニメーションを追加することができません。 this-second slideのように、画像が左側から、テキストが右側から表示されます。

animate.cssを追加し、data-animated = "fadeInLeft"を使用してみましたが、すべてのスライドを同時に読み込んでいて、目的を果たしていません。

JSまたはCSSを使用してアニメーションを追加できるオプションはありますか？

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

.testimonial { 
 
\t img { 
 
\t \t position:relative; 
 
\t } 
 
\t figcaption { 
 
\t \t position: absolute; 
 
\t \t bottom: 35px; 
 
\t \t left:0px; 
 
\t \t z-index: 1; 
 
\t \t h5 { 
 
\t \t \t color: white; 
 
\t \t \t font-size: 16px; 
 
\t \t \t padding: 0px 38px; 
 
\t \t \t position: relative; 
 
\t \t \t display: inline-block; 
 
\t \t \t font-size: 22px; 
 
\t \t \t font-family: $font-stack; 
 
\t \t \t &:last-child { 
 
\t \t \t \t font-size: 22px; 
 
\t \t \t \t font-family: $font-arial; 
 
\t \t \t \t padding-left:15px; 
 
\t \t \t \t &:before { 
 
\t \t \t \t \t content: ""; 
 
\t \t \t \t \t position: absolute; 
 
\t \t \t \t \t background-color: $cabaret; 
 
\t \t  \t \t  top: -5px; 
 
    \t \t \t \t left: -13px; 
 
    \t \t \t \t height: 35px; 
 
    \t \t \t \t width: 3px; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 
.slider-image-block, .slider-quote-block { 
 
\t width:50%; 
 
\t 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 とを実際に使いたい場合、カスタムのトランジションをしたいと思っているのですが、これはちょっとしたハックを使って行うことができます。私はこれを実証するJSFiddleを調理しました。うまくいけば、これはあなたが望んだことですか？

スライドの一部が片側から入ってくるようにするには、Slickのオプションを使用して一度に2つのスライドをステップしました。カスタムイベントリスナーでは、これら2つのスライドに異なるアニメーションが与えられ、探している効果を実現します。

関連するコードは、以下のイベントリスナーです。

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に設定し、イベントリスナーにカスタムトランジションを適用することで、スリックトランジションを無効にする組み合わせです。 AFAIK、現在のところ、より良い方法でトランジションを無効にする方法はありませんが、それはもちろん望ましいことです。もう1つの選択肢は、Slickをまったく使用しないことですが、私はそれをあなたに任せて決定します。

EDIT：アニメーションの速度（JSFiddle）の変更と同期スライダー（JSFiddle）を使用してもコメントで要求ごとに、行うことができます。ナビゲーションスライダーでスライドを1つのスライドとして表示するには、いくつかのCSSを使用できます（JSFiddle）。