初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

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

> JavaScript


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


今回は、要素の数によって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”)の部分はご自身のマークアップに合わせて変更してください。

関連記事

【Javascript】スクロールで要素を表示させる方法
物事を継続させることが成功の「最初の一歩」であり、「最大の一歩」。 どうも、 ジャバスクリプトを勉強中の管理人です。 私はweb制作の仕事を
【Javascript】ジャバスクリプトの基本文法【初心者向け】
web制作の現場で昨今非常によく使われているJavascript。 jQueryという非常に便利なツールが登場し、今ではjavascript
【bxslider】最後のスライドが最初に表示されるバグの対処法
こんにちは。 今回はbxSliderのお話です。 スライダーのjsといえば bxSliderslickSwiper などなどありますね。 実
【jQuery】クリッカブルマップをレスポンシブ対応させるjs「jQuery RWD Image Maps」の使い方
クリッカブルマップでマークアップしたいとき、レスポンシブ対応させることができないかと思い調べたら余裕で見つかった。   しかも、要



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です