bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

レスポンシブ対応の便利なjQueryプラグイン「jquery.bxslider.js」のbxSliderをカルーセルや、コンテンツスライダーなど、デザインサンプル5種を作りました。

bxSliderの基本的な使い方は下記からどうぞ！

超簡単に設置できるjQueryの画像・スライダープラグイン「jquery.bxslider.js」の使い方と、オプションでのカスタマイズをまとめています。jQuery関連記事bxSliderは、オプションでカルーセルやレスポンシブ対応にでき...

bxSliderをカルーセル表示にする
bxSliderをサムネイルをクリックでもスライド可能にする
bxSliderをニュースティッカーモードで表示する
横幅いっぱいで両サイドが少し見えるデザイン
bxSliderをコンテンツスライダーとして使う

jQuery関連記事

bxSliderをカルーセル表示にする

See the Pen
by むぅ (@mugenweb)
on CodePen.0

JavaScript

$(document).ready(function () {
  $('#bxslider').bxSlider({
    slideWidth: 450,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10
  });
});

slideWidth、minSlides、maxSlides、moveSlidesのオプションを設定することで、カルーセルスライダーとして使えるようになります。

bxSliderをサムネイルをクリックでもスライド可能にする

See the Pen
by むぅ (@mugenweb)
on CodePen.0

html

<div class="bx-pager">
  <a data-slide-index="0" href="javascript:void(0)"><img
      src="https://mugenweb-note.com/web/wp-content/uploads/2021/08/TOMS526511_TP_V.jpg" /></a>
  <a data-slide-index="1" href="javascript:void(0)"><img
      src="https://mugenweb-note.com/web/wp-content/uploads/2021/06/shikun12665V7A4247_TP_V.jpg" /></a>
  <a data-slide-index="2" href="javascript:void(0)"><img
      src="https://mugenweb-note.com/web/wp-content/uploads/2021/02/tomcat1569_TP_V.jpg" /></a>
  <a data-slide-index="3" href="javascript:void(0)"><img
      src="https://mugenweb-note.com/web/wp-content/uploads/2020/11/tomcat1577_TP_V.jpg" /></a>
</div>

JavaScript

$(document).ready(function () {
  $('#bxslider').bxSlider({
    pagerCustom: '.bx-pager'
  });
});

基本のhtmlにサムネイル部分を追加します。
data-slide-index="0"をaタグに記述することで、クリックされたときにスライダーの該当番号に切り替わります。

javascript:void(0)については、下記を参照してください。

HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説

HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説しながら、様々なaタグの使い方をまとめました。HTML5関連記事aタグとは？「aタグ」は、よく別ページへのリンクをするた...

bxSliderをニュースティッカーモードで表示する

See the Pen
by むぅ (@mugenweb)
on CodePen.0

JavaScript

$(document).ready(function () {
  var slideSpeed = 5000;
  var slideLength = $('#bxslider li').length;
  $('#bxslider').bxSlider({
    ticker: true,
    minSlides: 2,
    maxSlides: 3,
    slideWidth: 320,
    slideMargin: 10,
    tickerHover: true,
    speed: slideSpeed * slideLength
  });
});

tickerで、ニュースティッカーモードで表示できます。
要素の数で、スピードが変わってしまうので、slideLengthで要素の数を取得し、基本のスピードと合わせて計算しています。

横幅いっぱいで両サイドが少し見えるデザイン

See the Pen
by むぅ (@mugenweb)
on CodePen.0

html

<div id="container">
  <div id="wrap">
    <ul id="bxslider">
      <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/08/TOMS526511_TP_V.jpg"></li>
      <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/06/shikun12665V7A4247_TP_V.jpg"></li>
      <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/02/tomcat1569_TP_V.jpg"></li>
      <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2020/11/tomcat1577_TP_V.jpg"></li>
    </ul>
  </div>
</div>

css

#container{
  overflow: hidden;
}
#wrap{
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.bx-wrapper{
  width: 100%;
  margin: 0 auto;
}

.bx-viewport{
  overflow: visible !important;
}

JavaScript

$(document).ready(function () {
  $('#bxslider').bxSlider({
    slideWidth: 500,
    maxSlides: 2
  });
});

html構造とcssを変えるだけでオシャレっぽいデザインに変更できます。
maxSlidesを2とすることで、スライドしたタイミングで移行先の画像が表示されないのを解消しています。

bxSliderをコンテンツスライダーとして使う

See the Pen
by むぅ (@mugenweb)
on CodePen.0

html

<ul id="bxslider">
  <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/08/TOMS526511_TP_V.jpg">
  <p>テキスト</p></li>
  <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/06/shikun12665V7A4247_TP_V.jpg">
  <p>テキスト</p></li>
  <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2021/02/tomcat1569_TP_V.jpg">
  <p>テキスト<br>テキスト</p></li>
  <li><img src="https://mugenweb-note.com/web/wp-content/uploads/2020/11/tomcat1577_TP_V.jpg">
  <p>テキスト</p></li>
</ul>

css

#bxslider ul{
  display:flex;
  padding-left:0
}

#bxslider ul li{
  width: 49.5%;
}

#bxslider ul li:first-child{
  margin-right: 1%;
}

JavaScript

$('#bxslider').bxSlider({
  slideWidth: 920,
  hideControlOnEnd: true,
  pager: true,
  controls: true,
  speed: 1000,
  adaptiveHeight: true,
  pause: 10000
});

基本のhtml構造を変更し、ulをスライドする要素にすることで、liたちを同じスライドとして扱っています。
スライド同士の高さが違う場合、adaptiveHeightでスライダーの高さの自動調整ができるので、それぞれの高さにあった表示ができます。