bxSliderを使ってカルーセル(スライダー)を作ってみよう
今回はWebサイトでよく見かけるカルーセル(スライダー)の作り方を備忘録も兼ねて簡単にまとめました。
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです!
目次
- bxSliderとは?
- bxSliderを使えるように事前準備しよう
- bxSliderの使い方
- bxSliderの各オプションの説明
- bxSliderが無事実装できたら独自のCSSで装飾して見た目を整えよう
- まとめ
bxSliderとは?
「bxSlider」の特徴は、画像などのスライドショーやカルーセルを、簡単に設置できてオプションでカスタマイズもしやすく多用途な使い方ができるjQueryプラグインです。
また、レスポンシブにも対応しており、スマホやタブレットなどの画面幅に合わせてサイズを自動調整してくれます。
bxSliderを使えるように事前準備しよう
まずは、「bxSlider」を「GitHub」の「dist」フォルダから下記2点のファイルをダウンロードしておいてください。
- jquery.bxslider.min.css
- jquery.bxslider.min.js
Github
bxSliderの使い方
HTMLを記述していこう
<ul class="js-bxSlider">
<li><img src="https://hiromiyablog.com/wp-content/uploads/2021/06/programming.jpg" class="noLazyLoaded"></li>
<li><img src="https://hiromiyablog.com/wp-content/uploads/2021/06/profile.jpg" class="noLazyLoaded"></li>
<li><img src="https://hiromiyablog.com/wp-content/uploads/2021/06/main_visual.jpg" class="noLazyLoaded"></li>
<li><img src="https://hiromiyablog.com/wp-content/uploads/2021/06/about.jpg" class="noLazyLoaded"></li>
</ul>
上記のようにまずは土台となるHTMLを記述します。
class名やタグの種類などは別のものでも大丈夫です!
ただ、class名js-bxSlider
は最初にjs
と書かれている通り、後から「jQuery」で使用するのでこちらで変更した際は「jQuery」側のclass名も同じ箇所を変更するようご注意ください。
classはできるだけ「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名とで分けて使い、分かりやすいように「JavaScript・jQuery」で使うclass名には先頭にjs-
のような感じのclass名をつけた方がいいかと思います!
bxSliderとjQueryライブラリ本体の読み込み
<link rel="stylesheet" href="/○○○○/css/jquery.bxslider.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/○○○○/js/jquery.bxslider.min.js"></script>
続いて、先ほど事前準備で「GitHub」よりダウンロードした「bxSlider」を自身のサイトが置いてあるサーバ等にアップロードし、html
のhead
内に上記のように記述し各ファイルを読み込ませます。
読み込み順は上記のようにCSSファイル
「jquery.bxslider.min.css」、
「jQueryライブラリ本体」、
「jquery.bxslider.min.js」の順に読み込みます。
※「○○○○」の部分は自身の環境に合わせてファイルが読み込めるようパスを書き換えてください
bxSliderの実行コードを記述していこう
<link rel="stylesheet" href="/○○○○/css/jquery.bxslider.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/○○○○/js/jquery.bxslider.min.js"></script>
<script>
// bxSlider
$(document).ready(function () {
$('.js-bxSlider').bxSlider({
mode: 'horizontal', // スライド方法を設定「horizontal」横スライド、「vertical」 縦スライド、「fade」 フェードでの切り替え(初期値は‘horizontal’)
speed: 500, // スライドするスピードの設定(初期値は500)
slideMargin: 10, // 各スライド間の余白を設定(初期値は0)
slideWidth: 450, // 各スライドの幅を指定(初期値は0)
minSlides: 3, // 一度に表示させる最小数を設定(初期値は1)
maxSlides: 3, // 一度に表示させる最大数を設定(初期値は1)
moveSlides: 1, // カルーセル表示のときに移動するスライド数の設定(初期値は0)
pager: true, // ページ送りを追加するかどうかの設定(初期値はtrue)
auto: false, // 自動スライドの設定(初期値はfalse)
pause: 4000, // 自動スライドの待ち時間の設定(初期値は4000 ※単位ms)
autoHover: false, // スライダーにホバーしたときに自動スライドを停止させるかどうか設定(初期値はfalse)
autoDelay: 0 // 自動スライドを開始するまでの待ち時間の設定(初期値は0)
});
});
</script>
各ファイルを読み込めたら、<script>
タグや「別のJavaScriptファイル」に「bxSlider」を適用する要素を上記のように指定し記述します。
上記の場合は'.js-bxslider'
(HTML側のclass="js-bxSlider"
の記述がある要素)が「bxSlider」を適用する要素に指定しています。
なお、オプションを追加することで色々と設定できますがこちらではよく使いそうなオプションのみ追記しております。//
の後はコメントアウトで各オプションについて簡単に説明を書いてありますので参考にして実装してみてください。
不要なオプションは削除しても大丈夫です。
※注意:オプション指定の最後にだけ「,(カンマ)」がないですがこちらは最後のみ記述しないようにしましょう
注意
bxSliderが動作しないけどなんでだろうという時はまずjQueryが読み込まれているか確認してください。
読み込まれていない場合は公式サイトからダウンロードしてサイトに追加して読み込むか、CDN経由でjQueryライブラリを読み込ませましょう。
CDN経由の場合は実行させたい今回記述したjQueryより前の箇所に下記コードのように(jQuery CDN公式サイトより引用)追記しましょう。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
jQuery公式サイト
各種CDNの公式サイト
bxSliderの各オプションの説明
項目 | オプションの説明 | 記述方法 |
---|---|---|
mode | スライド方法を設定「horizontal」横スライド、「vertical」 縦スライド、「fade」 フェードでの切り替え ※初期値は「horizontal」 | horizontal / vertical / fade |
speed | スライドするスピードの設定 ※初期値は500 | 数字(例:500) |
slideMargin | 各スライド間の余白を設定 ※初期値は0 | 数字(例:10) |
slideWidth | 各スライドの幅を指定 ※初期値は0 | 数字(例:450) |
minSlides | 一度に表示させる最小数を設定 ※初期値は1 | 数字(例:3) |
maxSlides | 一度に表示させる最大数を設定 ※初期値は1 | 数字(例:3) |
moveSlides | カルーセル表示のときに移動するスライド数の設定 ※初期値は0 | 数字(例:1) |
pager | ページ送りを追加するかどうかの設定 ※初期値はtrue | true / false |
auto | 自動スライドの設定 ※初期値はfalse | true / false |
pause | 自動スライドの待ち時間の設定 ※初期値は4000(単位ms) | 数字(例:5000) |
autoHover | スライダーにホバーしたときに自動スライドを停止させるかどうか設定 ※初期値はfalse | true / false |
autoDelay | 自動スライドを開始するまでの待ち時間の設定 ※初期値は0 | 数字(例:1000) |
bxSliderが無事実装できたら独自のCSSで装飾して見た目を整えよう
bxSliderが実装できたら最低限の装飾や動作などはしていると思いますが大抵の場合、そのままの見た目で使うことは少ないかと思いますので下記のようにjquery.bxslider.min.css
内ではなく、独自のCSSファイルを作成して下記ハイライト部分のようにjquery.bxslider.min.css
の後にそのファイルを読み込み自身の表現したいデザインになるようにCSSを上書きするような形で装飾していってみてください。
※「○○○○」の部分は自身の環境に合わせてファイルが読み込めるようパスを書き換えてください
<link rel="stylesheet" href="/○○○○/css/jquery.bxslider.min.css">
<link rel="stylesheet" href="/○○○○/css/独自CSSファイル名(英記表示で作成).css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/○○○○/js/jquery.bxslider.min.js"></script>
まとめ
今回はjQueryプラグイン「bxSlider」の使い方について簡単にはなりますが、カルーセル(スライダー)の作り方を説明させていただきました!
「bxSlider」について最低限の説明でしたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。
参考サイト
デモページ
デモページはこちらになります。
See the Pen bxSliderでカルーセル(スライダー)実装 by hiroyuki.miyauchi (@hiromiya) on CodePen.
※各言語ボタンを押し下し、ソースコードをLIVE(リアルタイム)で書き換えて表示・実行結果を確認できます。
最後にもう一度ポイントをおさらい
- 「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう
- 各ファイルは「jquery.bxslider.min.css」、「jQueryライブラリ本体」、「jquery.bxslider.min.js」の順に読み込もう
- デフォルトの見た目を整える際は別のCSSファイルを作成して「jquery.bxslider.min.css」の後に読み込んで見た目を整えていこう
- 「bxSlider」の各オプションは必要なものだけ追加して不要なものは削除(記述しないように)しよう
- オプション指定の最後にだけ「,(カンマ)」がないですがこちらは記述しないようにしましょう
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。