【bxsliderをif文の条件分岐で実行】要素の数によってスライダーを実装するかどうかを切り替える

こんにちは、管理人です。

今回は、要素の数によってbxslider（ボックススライダー）のスライダーを実行するか否かをJavaScriptで条件分岐してみたいと思います。

といっても、bxsliderに限らず、要素の数によって実行するプログラム？Script（スクリプト）？をif文で条件分岐するプログラムを作ってみました。

web制作の仕事をしている方には役に立つと思いますので、ぜひ参考にしてみてください。

bxslider（ボックススライダー）を使っているときに生じる問題点

WordPress（ワードプレス）をカスタマイズしていると、こんな条件で記事一覧、もしくはスライダーにしたい、ということが多々あります。

例えば、

• このカスタム投稿の記事
• このカスタムフィールドが○○
• このカスタムタクソノミーに属している

という条件で絞り込んで記事一覧を出力して表示したい！

といった感じです。

この条件で絞り込まれた記事が出力されてくるわけですが、そこで十分な記事数が出力されてくれれば一覧表示だろうがスライダーだろうが問題なくできるかと思います。

問題は、ここで出力されてくる記事が、ページによっては2記事とか1記事だけだったりした時です。

特にbxslider（ボックススライダー）でスライダーの仕様を作った時、記事の件数が少ない時に表示にバグが出てしまいます。

こんな感じ。

↓↓↓↓↓（これは要素が2つに設定していてバグが発生しているデモです。）

＜デモ＞

スライダーのプラグインの中ではバグが生じず、画面の横幅を超える数の要素がある場合にスライダーの処理を実行する、というスライダープラグインがあったと思います。

が、私はいつもbxsliderにお世話になっていますので、どうにかいつも通りbxslideを使えないものかと思った次第です（笑）

もちろん他のスライダーを使う時もありますが、bxsliderに慣れてるので、要素の数によってこのプラグインを条件分岐させて、少し融通を利かせたいな、、、ということです^^;

コピペでできる！要素の数によってbxsliderを実行するか否かを条件分岐

それでは、実際にJavaScriptのソースを書いてみます。

$(function () {
	var size = jQuery(".slider li").length;//スライダーの要素の数を数えて「size」変数に格納
	if (size >= 5) {//「size」変数に格納された数が5以上だった場合、つまりスライダーの要素が5個以上だった場合に下のbxslider（ボックススライダー）のスクリプトを実行する
		jQuery(‘.slider’).bxSlider({
			auto: true,
			slideWidth: 164,
			slideMargin: 18,
			maxSlides: 4,
			minSlides: 2,
			moveSlides: 2,
			infiniteLoop: true,
			autoHover: true,
			stopAutoOnClick: true,
			controls: false,
			pager: true,
			autoControls: true,
		});
	} else {
	}
});

一応ほとんどコピペで使えるようになっていると思います。

セレクタの指定 $(“.slider”)の部分はご自身のマークアップに合わせて変更してください。