スライダーの代名詞bxsliderを実装する
今やほとんどのサイトで導入されている、トップページの一番目立つところで写真がシュッ、シュッと切り替わるアレ。メッセージや商品のビジュアルを効果的かつ効率的に訴求するために欠かせない機能ですね。Web制作の業界では「スライダー」と呼ばれているアレ、シトラスデザインではもちろん実装可能です。横スライドだったりフワッと入れ替わったり、細かいご要望にも対応可能なので是非ご相談を。
今日はWebサイトの制作で使わないことはないと言っても過言ではないスライダーの実装について。細かい設定もあれこれできるけど、枝葉の説明は他のサイトにお願いして、ここでは基本だけやっていきます。
使いやすいスライダー「bxslider」
Web制作業界で知名度ナンバーワン（個人の感想）なのがbxsliderです。
- レスポンシブ対応
- 横スライド、縦スライド、フェードイン・アウト
- ランダム機能
- ループ機能
- カルーセル対応
とりあえず最低限必要な上記の機能があり、他にも豊富なオプションがあります。
ではbxsliderの使い方と最低限の機能を実装してみましょう。
オプションなしのもの
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
jQuery(function($) {
$('.bxslider').bxSlider({});
});
</script>
<style>
img{
width:100%;
height:auto;
display:block;
}
ul{
list-style:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul class="bxslider">
<li><img src="ph01.jpg" alt=""></li>
<li><img src="ph02.jpg" alt=""></li>
<li><img src="ph03.jpg" alt=""></li>
<li><img src="ph04.jpg" alt=""></li>
<li><img src="ph05.jpg" alt=""></li>
</ul>
</body>
</html>自動再生、速度設定、フェード切り替え、ランダム、サムネイル付き
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
jQuery(function($) {
$('.bxslider').bxSlider({
auto: true,
speed: 1000,
pause: 5000,
mode: 'fade',
randomStart: true,
pagerCustom: '.bxslider_thumbnail',
});
});
</script>
<style>
img{
width:100%;
height:auto;
display:block;
}
ul{
list-style:none;
margin:0;
padding:0;
}
.bx-wrapper{
margin-bottom:10px;
}
.bxslider_thumbnail{
width:100%;
display:flex;
}
.bxslider_thumbnail li a{
border:2px solid #FFF;
display:block;
}
.bxslider_thumbnail li a.active{
border:2px solid #0F0;
}
</style>
</head>
<body>
<ul class="bxslider">
<li><img src="ph01.jpg" alt=""></li>
<li><img src="ph02.jpg" alt=""></li>
<li><img src="ph03.jpg" alt=""></li>
<li><img src="ph04.jpg" alt=""></li>
<li><img src="ph05.jpg" alt=""></li>
</ul>
<ul class="bxslider_thumbnail">
<li><a data-slide-index="0" href=""><img src="ph01.jpg" alt=""></a></li>
<li><a data-slide-index="1" href=""><img src="ph02.jpg" alt=""></a></li>
<li><a data-slide-index="2" href=""><img src="ph03.jpg" alt=""></a></li>
<li><a data-slide-index="3" href=""><img src="ph04.jpg" alt=""></a></li>
<li><a data-slide-index="4" href=""><img src="ph05.jpg" alt=""></a></li>
</ul>
</body>
</html>オプションの種類は他にも大量にあってとても説明しきれない！とりあえずよく使うものだけちょいとまとめておきますので、他に必要な機能があれば公式サイトや他のサイトを参照しよう。
よく使うオプション一例
| オプション名 | 説明 |
|---|---|
| mode | スライドの動作モードを指定します。”horizontal”（水平方向のスライド）または”vertical”（垂直方向のスライド）を設定できます。デフォルトは”horizontal”です。 |
| speed | スライドのアニメーション速度をミリ秒単位で指定します。デフォルトは500です。 |
| slideMargin | スライド間の余白をピクセル単位で指定します。デフォルトは0です。 |
| auto | スライドの自動再生を有効にするかどうかを指定します。true（有効）またはfalse（無効）を設定できます。デフォルトはfalseです。 |
| pause | 自動再生時にマウスがスライド上に乗った時に自動再生を一時停止するかどうかを指定します。true（一時停止する）またはfalse（一時停止しない）を設定できます。デフォルトはtrueです。 |
| controls | ナビゲーションコントロール（前へ・次へのボタン）を表示するかどうかを指定します。true（表示する）またはfalse（表示しない）を設定できます。デフォルトはtrueです。 |
| pager | ページャー（ドットナビゲーション）を表示するかどうかを指定します。true（表示する）またはfalse（表示しない）を設定できます。デフォルトはtrueです。 |
それではまた。
