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

  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に関する記事は他にもありますので、よろしければどうぞ

MovableType/WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。


アナタが実現させたい機能、やりたい事をお聞かせいただけませんか? そのイメージを一緒に実現しましょう!
お問い合わせは以下のページから!!

やまライダーのサイトへ

書いた人:やまライダー(嫁)

Web屋さんで8時間フルタイム勤務をしている、いわゆるワーキングマザー。
夫婦共働きで、ムスメ氏を育てています。
主に資産運用にかかわるお金の話、ムスメ氏を育てていく上での子育ての話、そしてたまにお仕事関連の記事を書いていく予定。
プロフィールを見る