2016-12-26 30 views
1

変更前または変更後のアクティブなスライダーコンテンツのアニメーションを変更できるオプションまたはメソッドを探しています。例えば、私はスリックスライダー「はスライダヘッダ」と呼ばれており、それはのような内部3個の<h1>タグがあります。私は(左側に)slideOut少し遅れて第一のヘッダと第2ヘッダたいSlick slider on( 'afterChange')

<div id="slider-header"> 
    <div> 
     <h1>First header</h1> 
     <h1>Second header</h1> 
     <h1>Third header</h1> 
    </div> 
</div> 

を同じ遅延、3番目のヘッダーだけで、次のスライドのために変更したいのですか?
次のスライドを変更した後、同じ方法で他の側から表示するようにします。 私はsetTimeout()関数と 'slickNext'メソッドで左側にスライドするだけでしたが、同じ遅延方法で他の側から次のスライドにどのように表示させることはできません。

+0

あなたのコードを見せてください。これまでに何を試しましたか? – elicohenator

答えて

1

Slickスライダーには、「afterChange」という独自のイベントがあります。引数として、アニメーションの作成に使用できるcurrentSlideおよびnextSlideもあります。

$('#slider-header > div').on('afterChange', function(event, slick, currentSlide, nextSlide){ 
    console.log(nextSlide); 
}); 
+0

右から次のスライドがすぐにスライドし、ヘッダーも表示されます。右から1つずつ表示したいのですが、間違った方法でこのイベントを使用しているかもしれません。あなたは深く説明するためにjsfiddleを作ってください。どうもありがとうございます! –

+0

slick-currentまたはslick-activeクラスを使用します。スライドがスライドアクティブクラスの場合、CSSエフェクトを使用してコンテンツを表示します。それ以外の場合は、スライドがスライドアクティブクラスになるまで他の要素を非表示にします。 – edonbajrami

+0

hasClassであるかどうかを確認しようとしていて、何も起こらない場合、on( 'afterChange')イベントを何らかの形で実現することが可能ですか? :if($( "header-slide.slick-slide")。hasClass( 'slick-current')){ アラート( "Has class!"); } –

0

私は解決策私はスライダーの方向をターゲットにすることができ、私は助けのためにあなたをanimate.Thankする必要があるスライド .Using jQueryの

prev() 

または

next() 

方法を見つけましたみんな!

関連する問題