画像がスライドして切り替わるコンテンツスライダーを簡単に追加できるjQueryプラグインbxSliderの設置方法。
設置方法
設置方法は大まかに分けて2つ。
CDNを利用する
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Respsonsive jQuery content slider.
bxslider.com
上記、開発者さんのサイトよりコードをコピペ使用されているクラス名やタグの変更が不要ならdiv内を適宜編集して設置完了
bxSliderのファイルをローカルや自分のサーバーへアップロードして利用する
ローカルで動作テストや勉強したい場合や、
CDNが利用できないような状況ではbxSliderのファイルをダウンロードし利用する
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Respsonsive jQuery content slider.
bxslider.com
開発者さんのサイトよりbxSliderのファイルをダウンロードして解凍
解凍したフォルダに含まれる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/」に置換する
コメント