1. bxsliderの基本的な使い方
2. 簡単な解説
3. レスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える方法
4. bxslider関連記事

スライダーを簡単に実装できる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

bxslider関連記事

bxsliderに関する記事は他にもありますので、よろしければどうぞ

• bxsliderで100％幅の背景画像をスライド（切り替え）させる
• スライド要素の数でbxSliderの挙動を変え、想定の数以下の場合はスライドさせない
• jquery.heightLine.jsをbxSliderで使い、カルーセル表示で要素の高さを揃える方法
• bxsliderでslideWidthの値を％指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える