【bxSlider】アクティブなスライドを取得する方法

サンプル

アクティブなスライドのみ､カラーにしています｡

JS

bxSlider実行時､「onSliderLoad」と「onSlideAfter」というコールバックを使って､アクティブなスライドに「active-slide」クラスを付与します｡

$(function(){
	$("#bxslider").bxSlider({
		auto: true,
		touchEnabled:false,
		onSliderLoad: function(currentIndex){
			//スライド読込み時､アクティブなスライドにクラス付与
			$("#bxslider .slide:not(.bx-clone)").eq(currentIndex).addClass("active-slide");
		},
		onSlideAfter: function($slideElement){
			//スライド後､アクティブなスライドにクラス付与
			$("#bxslider .slide").removeClass("active-slide");
			$slideElement.addClass("active-slide");
		}
	});
});

公式ドキュメント はこちら

例えば2枚目がアクティブなとき､およそこのようなHTMLになります｡

<div id="bxslider">
	<div class="slide"><img src="/slickthumb/img/img01.jpg"></div>
	<div class="slide active-slide"><img src="/slickthumb/img/img02.jpg"></div>
	<div class="slide"><img src="/slickthumb/img/img03.jpg"></div>
	<div class="slide"><img src="/slickthumb/img/img04.jpg"></div>
</div>

あとはご自由に...ですが､例えばサンプルのやつだと

CSSをこのようにすれば､アクティブなスライドだけカラーにできます｡

#bxslider .slide:not(.active-slide) {
	filter: grayscale(1);
}

コメント

「できました！」などの報告もお待ちしております｡