スライド要素の数でbxSliderの挙動を変え、想定の数以下の場合はスライドさせない

  • facebook
  • このエントリーをはてなブックマークに追加
  • Twitter

スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」。

よくキャンペーンバナーで使用されるのですが、その場合大体スライド掲載数が可変です。
終了したキャンペーンは取り下げますし、常時新しいキャンペーンを実施し続けるわけにもいきません。
場合によっては、スライドさせる意味がないスライド数になります。
しかし、その度にjsファイルの「.bxSlider()」をコメントアウトするのは面倒です。

そこで、スライド要素の数で挙動を変え、想定の数以下の場合はスライドさせない方法をご紹介します。

bxsliderの基本的な使い方

下記から必要ファイルをダウンロードします。

jQuery Content Slider | Responsive jQuery Slider | bxSlider

ダウンロード後、必要なファイルを読み込みます。

<link rel="stylesheet" href="jquery.bxslider.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>

HTML

<ul class="bxslider">
<li><img src="img/img01.jpg" title=""></li>
<li><img src="img/img02.jpg" title=""></li>
<li><img src="img/img03.jpg" title=""></li>
</ul>

javascript

$(function(){
	// bxSlider共通オプション
	var defaultOption = {
		minSlides: 2,
		maxSlides: 2,
		moveSlides: 1,
		slideWidth: 400,
		slideMargin: 20
	};

	// 定義
	var slider = $('.bxslider').bxSlider(defaultOption);

	if(slider.getSlideCount() < 3) {// スライド要素2以下のとき
		defaultOption['infiniteLoop'] = false;
		defaultOption['controls'] = false;
		defaultOption['pager'] = false;
	} else {// スライド要素3つ以上のとき
		$(document).on('click', 'a.bx-prev, a.bx-next', function(){
			slider.startAuto();
		});
	};

	// スライダーをリロード
	slider.reloadSlider();
});

簡単な解説

  1. スライド要素の数で変動しない共通オプションを書き出し、bxSliderを定義します。
  2. スライド要素の数によって変わる挙動をオプションに追加します。
    上記の場合は「スライドループなし」「前後のコントロールなし」「ページ送りなし」です。
  3. bxSliderをリロードします。

レスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える方法

上記であげた例の slideWidth には 400 を指定しておりましたが、この値を%指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える方法についてはこちら。

bxsliderでslideWidthの値を%指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える
スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」では、カルーセル表示が可能です。そのカルーセル表示の際に設定必須のオプションに「slideWidth」があります。「slideWidth」はスライドの幅を指定するオプショ…
https://sendai-kuraso.com/work/html-css-js-php/bxslider-carousel.html

前の記事

WordPressの自動アップデートを停止させる方法と更新通知のみ停止させる方法

次の記事

イオンから議決権行使のお礼として特別優待券が届きました