JavaScript

初心者向け解説：jquery.bxslider.jsで複数画像のスライダーを簡単に作成する方法

  /

Webサイトやブログでビジュアルコンテンツを際立たせたい場合、画像スライダーは非常に効果的なツールです。
今回は、ページャーやコントローラー、ループ、スマホ対応など、多機能で使い勝手の良いjquery.bxslider.jsを使った複数画像スライダーの設置方法を紹介します。
このライブラリは、さまざまな種類のスライダーに対応しており、多彩なオプションを提供しています。この記事を通じて、初心者でもステップバイステップでスライダーを実装できるように解説していきます。

スライダー系って色々種類あって各々オプションを覚えるのに時間掛かりますよね。

Contents

スタイル設定: CSSでスライダーの見た目を整えよう

まずは、スライダーの見た目を整えるために必要なCSSを設定します。jquery.bxslider.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>

　
このCSSは、スライダーを中央に配置し、ページ全体の基本的なマージンやパディングをリセットします。.wrap クラスはスライダーのコンテナとして機能し、適切な幅で中央に表示されます。

HTML構造:スライダーの基本形を作成する

次に、スライダーを構成するHTMLを設定します。以下の例では、ul 要素を使用して画像リストを作成し、各 li 要素に個別の画像を配置します。
横一列の複数画像スライダーエリア（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>

JavaScriptで動きを加える

スライダーの動作を制御する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>

汎用的スライダーjquery.bxslider.jsを使った複数画像スライダーを表示するデモページ

実際にこれらのコードを使ってスライダーを設置したデモページは以下のリンクからアクセスできます。実際の動作を確認して、さらに理解を深めましょう。

汎用的スライダーjquery.bxslider.jsを使った複数画像スライダーを表示するデモページ

ソース元：bxslider-4

jquery.bxslider.jsのソースコードは以下のリンクから確認できます。カスタマイズや詳細な設定について学びたい方は、是非チェックしてください。

bxslider-4

まとめ

この記事では、jquery.bxslider.jsを使って魅力的な複数画像スライダーを設置する方法を詳しく説明しました。スタイル、HTMLの構造、JavaScriptの設定という三つのステップを順に進めることで、あなたのウェブサイトやブログに目を引くビジュアル要素を加えることができます。これからも、より魅力的なウェブコンテンツの作成に役立ててください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

スライダー jquery.bxslider.js
関連記事