汎用的スライダーjquery.bxslider.jsを使って複数画像スライダーを表示する方法｜DAD UNION

ページャーやコントローラー、ループ、スマホ対応等に対応した汎用的なスライダーjquery.bxslider.jsを使って複数画像スライダーを表示する方法をご紹介します。
スライダー系って色々種類あって各々オプションを覚えるのに時間掛かります。

Contents

jquery.bxslider.jsを使って複数画像スライダーを表示するCSS記述
jquery.bxslider.jsを使って複数画像スライダーを表示するHTML記述
jquery.bxslider.jsを使って複数画像スライダーを表示するJavaScriptの記述
汎用的スライダーjquery.bxslider.jsを使った複数画像スライダーを表示するデモページ
ソース元：bxslider-4

jquery.bxslider.jsを使って複数画像スライダーを表示するCSS記述

※jquery.bxslider.cssファイルを読み込みます。スライドエリア（.wrap）のCSS記述です。必要に応じて変更して下さい。

<link href="jquery.bxslider.css" rel="stylesheet" />
<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
  width:100%;
  margin:0px;
  padding:0px;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0 0 0;
}
.wrap{
  width: 600px;
  margin: 0 auto
}
</style>

jquery.bxslider.jsを使って複数画像スライダーを表示するHTML記述

※横一列の複数画像スライダーエリア（class=”bxslider”）にスライド画像（1 ～ 8.jpg）を用意しました。

<h1>jquery.bxslider.jsを使った複数画像スライダーを表示</h1>

<div class="wrap">
  <ul class="bxslider">
    <li>
      <img src="1.jpg" />
    </li>
    <li>
      <img src="2.jpg" />
    </li>
    <li>
      <img src="3.jpg" />
    </li>
    <li>
      <img src="4.jpg" />
    </li>
    <li>
      <img src="5.jpg" />
    </li>
    <li>
      <img src="6.jpg" />
    </li>
    <li>
      <img src="7.jpg" />
    </li>
    <li>
      <img src="8.jpg" />
    </li>
  </ul>
</div>

jquery.bxslider.jsを使って複数画像スライダーを表示するJavaScriptの記述

※jquery-3.1.1.min.js、jquery.bxslider.jsファイルを読み込みます。$(‘スライダーエリア’).bxSlider({オプション})を記述します。スライドの移動数、余白、幅、スピード無限、自動スライド等を設定可能です。

<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.bxslider.js"></script>
<script>
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      mode: 'horizontal',
      moveSlides: 1,
      slideMargin: 40,
      infiniteLoop: true,
      slideWidth: 660,
      minSlides: 3,
      maxSlides: 3,
      speed: 800,
      auto: true
    });
  });
</script>