このエントリーをはてなブックマークに追加

bxslider で投稿のカルーセルスライダーを実装し、中央に来るスライドのみいくつかの要素を表示する仕様で、

      onSliderLoad: function(currentIndex) {     
        $('#slider').children().eq(currentIndex + 1).addClass('active-slide');
  },
      onSlideBefore: function($slideElement){
        $('#slider').children().removeClass('active-slide');
        $slideElement.addClass('active-slide');
  }

を設定に追加。onSlideAfter では切り替わるタイミングが少し遅いのでonSlideBefore とした。
表示・非表示の要素にはCSSでtransition を付けて滑らかに。

2017.11.16 投稿 

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles