【bxSlider】アクティブなスライドにclassを追加する方法とcssアニメーションで動きを加える方法

bxSliderといえばレスポンシブにも対応するスライダーで、最もよく使われるスライダープラグインの一つですが。スライドの動き自体は、横スライド、縦スライド、フェードの３種類だけです。これだけでも、スライダーとしては十分なのですが、もう少し、動きを加えたいといった要望もあると思います。
そこで今回は、スライドして表示された要素にclassを追加して、cssアニメーションを加える方法をご紹介します。
この方法を使うと、いつものスライダーがちょっとリッチにグレードアップできるので是非最後までご覧ください！

スライドして表示された要素にオプションを使ってclassを追加する方法
bxSliderにｃｓｓアニメーションを追加する

スライドして表示された要素にオプションを使ってclassを追加する方法

cssアニメーションを実行するには、アニメーションをスタートさせるためのきっかけが必要です。このきっかけをアクティブになったスライド（スライドして表示された要素）にclassを付与することで作りたいと思います。
これを実現させるために、bxSliderのCallback関数を使います。

bxSliderのCallback関数はいくつかあるのですが、今回はonSlideAfterを使います。classを追加するタイミングをonSlideBefore（スライドする直前に実行）にするか、onSlideAfter（スライド後に実行）にするかといったところなのですが、スライドが終わってからの実行（onSlideAfter）のほうがスライドのための動作が一通り終わった後にcssアニメーションが実行されるため、onSlideBefore（スライドする直前に実行）よりキレイに表現できるからです。
ちなみに、どちらでも書き方は一緒ですのでいろいろ試してみてください。

関数を使った書き方の前にこれらの関数の引数を先に紹介したいと思います。
$slideElement : スライドして表示された要素
oldIndex : 遷移前のスライドのインデックス番号
newIndex :遷移後のスライドのインデックス番号

上記３種ありますが、今回使う引数は「$slideElement」になります。それではサンプルのソースをご確認ください

$(document).ready(function(){
  $('.slide').bxSlider({pager:false,auto: true,controls: false,mode:'fade',
                onSlideAfter: function($slideElement){
                  $('.slide li').removeClass('active-slide');
                  $slideElement.addClass('active-slide');
                }
	});
});

$(document).ready(function(){

$('.slide').bxSlider({pager:false,auto: true,controls: false,mode:'fade',

onSlideAfter: function($slideElement){

$('.slide li').removeClass('active-slide');

$slideElement.addClass('active-slide');

}

});

html
※スライドさせる部分のみピックアップしております。JavaScriptの外部リンク等の部分は省略します。

<ul class="slide">
<li class="active-slide">画像１</li>
<li>画像２</li>
<li>画像３</li>
<li>画像４</li>
</ul>

</ul>

ご覧いただいてわかる通り、onSlideAfter: function($slideElement){　～　}　は他のオプションと同様「,」区切りで配置することができます。関数の中身ですが、まずは、「スライド要素」にclass名「active-slide」が設定されている場合は削除、その後「スライドして表示された要素」にclass名「active-slide」を設定するといった動作を行っています。これにより「スライドして表示された要素」にcssアニメーションを設定するきっかけ（. active-slide）を作ることができました。ちなみに、htmlソースで、あらかじめ最初の「li」に「active-slide」をつけているのは、htmlが読み込まれた直後の状態を、cssアニメーションの動作が一通り終わった後の状態で見せるために設定しています。それでは早速、cssアニメーションを追加してみましょう。

bxSliderにｃｓｓアニメーションを追加する

ここでは、シンプルにスライドに画像のスケールが変化する動きを加えるケースを紹介します。まずは、cssをご確認ください。

.slide li img{
	transform: scale(1.2);
	transition-duration: 4s;
}
.slide .active-slide img{
	transform: scale(1);
	
}

.slide li img{

transform: scale(1.2);

transition-duration: 4s;

}

.slide .active-slide img{

transform: scale(1);

}

ご覧のように、active-slideに画像の大きさが1.2倍から1倍に変化するcssアニメーション追加しました。それでは動きを確認してみてください。

簡単なアニメーションの追加ですが、ちょっとした変化があっていですよね！
サンプルのcssアニメーションは単純なものですが、スライダーの調整やcssアニメーションを工夫することで、いろいろおもしろいことができると思いますので是非挑戦してみてください。