2

そのスライド内の p 要素にアニメーションを追加するために、ken wheeler をactive slideターゲットにしようとしています。slick carousel

したがって、slideがアクティブな場合、p要素は (または何か) バウンスし、スライドが次のスライドに移行すると、アニメーションが新しい p 要素に適用されます。スライドがループした後、アニメーション化されたクラスが継続的に に適用されますslick carousel。

HTML:

<div class="slick-promo">
    <div class="single-slide">[img code here]<p>This text will come in animated, then as the slide leaves it will have the animation class removed.</p></div>
    <div class="single-slide">[img code here]<p>Lorem ipsum blah blah</p></div>
    <div class="single-slide">[img code here]<p>lorem ipsum blah blah</p></div>
</div>

imagesおよびいくつかは、classes私が使用する他のプログラムによって動的に生成されます。

Javascript:

jQuery(document).ready(function($){
    $('.slick-promo').slick({
      infinite: true,
      fade: true,
      cssEase: 'linear',
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      //this is where I need help
      onAfterChange:function(slider,index){
            $('.slick-active p').toggleClass('animated bounce');
      }
    });
});

クラスは、.slick-activeによって動的に生成されますslick carousel。p上記の HTML コードの要素をターゲットにしています。animated bounceクラスは、アニメーションを生成する css に関連付けられています。

私はにとても慣れてJavascript/jQueryいないので、私の間違いは初歩的なものかもしれません。私は何をする必要があるかを見つけようとして、何時間もウェブを検索しました...

4

1 に答える 1

5

問題は、洗練されたカルーセルによって提供される afterChange および beforeChange イベント中にクラスが追加および削除される方法にありました。

Javascript:

$('.slick-promo').on('afterChange', function(event, slick, currentSlide){
    $('.slick-active p').removeClass('hidden');
    $('.slick-active p').addClass('animated bounce');
});

$('.slick-promo').on('beforeChange', function(event, slick, currentSlide){
    $('.slick-active p').removeClass('animated bounce');
    $('.slick-active p').addClass('hidden');
});

これにより、.hidden クラスを html の p 要素に追加できました。これで、スライドが変更されたときに要素をターゲットにすることに成功しました。これにより、アニメーションがよりスムーズになります。

これにより、ロード時に最初のスライドにエラーが発生することに注意してください。私の回避策は、隠しクラスを最初のスライドに置かないようにすることです...

于 2015-04-09T18:00:31.643 に答える