1. bxsliderの基本的な使い方
2. slideWidthの値を%指定する
3. スライドの高さを揃える方法

スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」では、カルーセル表示が可能です。

そのカルーセル表示の際に設定必須のオプションに「slideWidth」があります。
「slideWidth」はスライドの幅を指定するオプションです。
この「slideWidth」はpx指定しか対応していません。

そのため通常のレスポンシブ対応では、画面サイズの変更に伴い表示されるスライドの数が変わります。

画面に表示されるスライドの数を変えずにスライドの幅を変えるレスポンシブ対応をしたい場合、スライド幅をpxではなく％指定する必要があります。
そこで「slideWidth」の値を%指定する方法をご紹介します。

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').bxSlider({
  minSlides: 3,
  maxSlides: 3,
  moveSlides: 1,
  slideWidth: 300,
  slideMargin: 20);
});

slideWidthの値を%指定する

javascript

$(function(){
  var windowWidth = jQuery(window).width();
  var width = windowWidth / 3;
  $('.bxslider').bxSlider({
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,
    slideWidth: width,
    slideMargin: 20;
});

解説

• jQuery(window).width(); で画面サイズを取得し、windowWidthに代入します。
• windowWidth / 3 で画面サイズを3で割った数値（約33%）を取得し、widthに代入します。
• slideWidthの値をwidthに指定します。

これで、画面サイズを変更しても表示されるスライドの数はそのままにレスポンシブ対応が可能です。

スライドの高さを揃える方法

jquery.heightLine.jsを使って要素の高さを揃える方法についてはこちら。

jquery.heightLine.jsをbxSliderで使い、カルーセル表示で要素の高さを揃える方法

スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」。カルーセル表示をした場合に、掲載テキスト量で高さが揃わない場合が出てきます。CSSでmin-height指定をしてもいいのですが、それだと拡張性があり…

https://sendai-kuraso.com/work/html-css-js-php/bxslider-heightline.html

bxslider関連記事

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

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