jQuery 定番プラグインbxSliderの設置方法

Javascript(jQuery)

画像がスライドして切り替わるコンテンツスライダーを簡単に追加できるjQueryプラグインbxSliderの設置方法。

設置方法

設置方法は大まかに分けて2つ。

CDNを利用する

jQuery Content Slider | Responsive jQuery Slider | bxSlider
Respsonsive jQuery content slider.

上記、開発者さんのサイトよりコードをコピペ使用されているクラス名やタグの変更が不要ならdiv内を適宜編集して設置完了

bxSliderのファイルをローカルや自分のサーバーへアップロードして利用する

ローカルで動作テストや勉強したい場合や、
CDNが利用できないような状況ではbxSliderのファイルをダウンロードし利用する

jQuery Content Slider | Responsive jQuery Slider | bxSlider
Respsonsive jQuery content slider.

開発者さんのサイトよりbxSliderのファイルをダウンロードして解凍
解凍したフォルダに含まれるdistフォルダ内のファイルを使う

distフォルダ内ファイル一覧

テスト環境として1つのフォルダ内にindex.htmlとjs、css、imagesフォルダを作成し、js、css、imagesの各フォルダへbxSliderのファイルを格納する
ファイルの準備ができたらindex.htmlのヘッドへ以下を記述

<head>
<!-- jQuery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- bxSlider JS -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS -->
<link rel="stylesheet" href="css/jquery.bxslider.css">

<script>
  $(document).ready(function(){
    $('.slider').bxSlider();
  });
</script>
</head>

bxSliderを設置したい場所に以下のHTMLを記述

<div class="slider">
  <div>I am a slide.</div>
  <div>I am another slide.</div>
</div>

矢印ボタンが表示されない場合

bxSliderはファイル解凍直後のフォルダ構成で設計されているため今回の前提のようにJSとCSSをまとめるためのフォルダにbxSliderのJS、CSSファイルを格納すると画像を指定しているCSSファイルと画像が格納されているフォルダの構成が設計当初より変わるため矢印やローディング画像が表示されなくなる
jquery.bxslider.css(またはjquery.bxslider.min.css)の画像読み込み部分を以下のように修正する
「images/」を「../images/」に置換する

パスの変更
画像指定パスの修正

コメント

タイトルとURLをコピーしました