bxsliderでslideWidthの値を%指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える

bxsliderでslideWidthの値を%指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える

スライダーを簡単に実装できる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に指定します。

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