レスポンシブデザインにも対応したシンプルなスライドショー「bxSlider」を紹介します。
また簡単な「スライド切り替えボタン」や「左右矢印」などを非表示にするカスタマイズ方法も紹介します。
- デモ
- 準備
- 設置方法
- オプション（カスタマイズ）
- 参考サイト
１．デモ
オフィシャルサイトのトップページで使われています。
bxSlider – The Responsive jQuery Content Slider –
２．準備
スライドショーで表示するための画像を３枚ほど用意しておきましょう。
各画像は、全く同じサイズで用意しておくとデザインの形が崩れずよいかと思います。
３．設置方法
手順１．スクリプト読み込みコードの記述
以下のコードを「bxSlider」を利用するページの<head>タグ内にコピペで記述してください。
※ネット上にあるファイルを読み込むので、どのようなフォルダ構成でもコピペで確実に動きます
(1) CSSファイルを読み込みます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">(2) jQueryを読み込みます。
※すでにjQueryを読み込み済みの場合には不要です
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>(3) JSファイルを読み込みます。
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>(4) スライドショー設定用のJSを記述します。
<script>
$(function(){
$('.bxslider').bxSlider({
auto: true
});
});
</script> 手順２．スライドショー用画像の配置
スライドショーを設置したい場所に以下のコードを記述し、<img>タグ部分のみ適宜差し替えて下さい。
<div class="bxslider">
<div><img src="images/pic1.jpg"></div>
<div><img src="images/pic2.jpg"></div>
<div><img src="images/pic3.jpg"></div>
<div><img src="images/pic4.jpg"></div>
</div>以上です。
４．オプション（カスタマイズ）
（１）アニメーションの種類変更など
bxSliderにはたくさんのオプションが用意されており、アニメーションの種類や切り替わりのスピードなどを調整することができます。たくさんあるので、一部だけ紹介します。
<head>内に記述した以下のコード部分を書き換えてください。
<script>
$(function(){
$('.bxslider').bxSlider({
auto: true
});
});
</script><script>
$(function(){
$('.bxslider').bxSlider({
auto: true, // 自動でスライドショーをスタートさせる （初期値: false）
mode: 'fade', // アニメーションの種類「'horizontal'」「'vertical'」「'fade'」 （初期値: 'horizontal'）
speed: 500, // アニメーションのスピード （初期値: 500）
pause: 4000, // 画像の切り替わる間隔 （初期値: 4000）
pager: false, // 下部にある画像切り替えボタンの表示・非表示 （初期値: true）
controls: false // 左右の矢印の表示・非表示 （初期値: true）
});
});
</script>すべてのオプションは公式サイトを参考にしてください。
Options – Responsive jQuery Slider | bxSlider –
（２）ボーダー線の消し方
また、初期で適用されるCSSによってスライドショーのまわりにドロップシャドーがついたりするのですが、もし単純に画像のみのスライドショーを設置したい場合には、以下のCSSを記述するとドロップシャドーを消せます。
.bx-wrapper {
box-shadow: none;
border: none;
left: 0;
background-color: transparent;
margin: 0 auto;
}