さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】bxsliderをボタンクリックでリロードする

Pocket
LINEで送る

タブ切り替えなどで、初回非表示になっている枠内でbxsliderを動作させている場合に、その枠を表示状態にしたときにbxsliderが動作しない。おそらく非表示状態になっていることが原因のようだ。
解決方法として、タブ切り替えのタブをクリックしたらbxsliderをリロードするようにする。

JQuery

$(document).ready(function(){
	var slider = $('.slideBox').bxSlider({
		auto: true,
		slideWidth: 1000,
		minSlides:1,
		maxSlides: 1,
		moveSlides: 1,
		speed: 500,
		pause: 5000,
		responsive: false,
		slideMargin: 0
	});

	// タブクリックでスライダーをリロード
	$('.tab ul li').on('click',function(){
		slider.reloadSlider();
	});
});

ページ内にスライダーが1つの場合は上記コードで動作するようだが、スライダーが複数ある場合ではスクリプトエラーとなってしまう。
複数スライダーで実装する場合は下記の参考サイトを参照。

カテゴリー:JQuery, スライダー

コメントを残す

コメント内容