kdcsライブラリー

時間のある時に学習するための備忘録

パララックススライダーrendered.js修正前はスライド完了後にページネーションが更新されるようになっていたが、これをスライドと同じタイミングで動かしたい。

以下が修正のポイント

現在のコードでは、.pagination の check イベントがスライド完了後に trigger(‘check’) されて、そこで .item に is-active クラスが付与されます。つまり、アニメーションが終わった後にページネーションが更新される仕組みです。

スライドの動きと同時に is-active を付与するには？ slideshowSwitch 関数内で、アニメーションの開始直後に .pagination .item の is-active を更新するようにすれば、スライドと同時にページネーションも切り替わります。

以下のように、アニメーション開始前にページネーションの更新処理を追加します。

// スライド切り替えの直前にページネーションを更新
var index = newSlide.index();
pages.removeClass('is-active');
pages.eq(index).addClass('is-active');

このコードを slideshowSwitch 関数内の、アニメーション開始前（例えば TweenMax.to(…) の前）に追加してください。たとえば fade トランジションの場合はこのあたり。

if (transition == 'fade') {
  // ページネーションを即時更新
  var index = newSlide.index();
  pages.removeClass('is-active');
  pages.eq(index).addClass('is-active');

  newSlide.css({
    display: 'block',
    zIndex: 2
  });
  ...

同様に、fade 以外のスライドアニメーションでも、TweenMax.to(…) の前に同じ処理を入れればOKです。