レスポンシブ対応でカルーセルもできるカスタマイズ性抜群の「bxSlider」

うぇぶもようの中の人

9年前

スライダーっていろんなオプションがついてて
おしゃれなものからシンプルなものまでたくさんの種類がありますよね。

私もまずは定番の「bxSlider」から始まり、いくつものスライダーを試してきましたが、
最終的にはbxSliderに戻ってきました。
なんでかというとやっぱり一番は余計な装飾がなくシンプルな構造で
カスタマイズがしやすいという点です。

DEMO

使い方

まずはbxSliderをダウンロード。
下記からダウンロードできます。

jQuery Content Slider | Responsive jQuery Slider | bxSlider

外部ファイル

jQuery本体とjquery.bxslider.min.jsを
head内に読み込みます。

<link rel="stylesheet" href="./css/jquery.bxslider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./js/jquery.bxslider.min.js"></script>

ファイルの階層はそれぞれの環境に合わせて変更してください。

JavaScript

ここで指定したclassを付与して使います！
例としてclass名をsliderにしていますが、
idでもclassでも名前も自由に決めてOKです。

<script type="text/javascript">
$(function() {
    $('.slider').bxSlider();
});
</script>

HTML

例としてulを使っていますが、divでもOKです。
class名は上記で設定したclass名またはid名と合わせれば自由でOKです。

画像で今回は説明をしておりますが、HTMLや動画を含むことができます。

<ul class="slider">
<li><img src="./img/photo01.jpg" alt="" /></li>
<li><img src="./img/photo02.jpg" alt="" /></li>
<li><img src="./img/photo03.jpg" alt="" /></li>
<li><img src="./img/photo04.jpg" alt="" /></li>
</ul>

以上で基本的な実装は完了です。
これだけで十分スライダーとして使えます。

デフォルトで指定してあるbox-shadowとborderを消したい場合

bxSliderはデフォルトでは画像の後ろにボックスシャドウがかかっています。
使いたくない場合は、以下を削除もしくはコメントアウトで消すことができます。

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border:  5px solid #fff;
	left: -5px;
	background: #fff;
	
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

オプション

オプションが充実しているのがbxSliderの特徴です。
bxSlider公式サイト｜オプション

日本語付でまとめてくれている方がいらっしゃいましたのでご紹介いたします。

http://hozunomiya.xyz/?p=83

以下では私がよく使うオプションをご紹介します。
指定している「’ ‘」内は初期値です。

指定をするときは、
最後のオプションの後には「,」は不要です。

mode: 'horizontal' //スライドのエフェクト　'horizontal', 'vertical', 'fade'
speed: 500　//スライドのアニメーションの時間
pause: 4000 //スライドを表示している時間
auto: false //自動スタート再生

randomStart: false //スライドの始めをランダムに
infiniteLoop: true //ループ
captions: false //キャプションの設定
adaptiveHeight: false //スライドの高さが違う場合、高さを調節する
 
pager: true //ページャーの有無
buildPager: null //サムネイルページャーの指定
controls: true //次へ、前へのコントロールの有無

responsive: true //レスポンシブ対応
 
//カルーセルの場合
ticker: false //画像が流れるようにするか
minSlides: 1 //最低表示数
maxSlides: 1 //最大表示数
moveSlides: 0 //スライドをどのくらいの数を動かすか
slideWidth: 0 //ひとつの要素の幅を指定
slideMargin: 0 //サムネイル間の余白（単位：px）

デモの説明

以下はDEMOの
サンプル表示のソースです。

1のデフォルトは上記で説明した一番シンプルな
基本的な表示なので飛ばします。

2.キャプション付

captions: true　を設定することによって、キャプションをつけることができます。
キャプションは、title内に入力したテキストが表示されます。

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $('.slider02').bxSlider({
    	captions: true
		});
  });
</script>

HTML

<ul class="slider02">
<li><img src="./img/photo01.jpg" alt="" title="Title01" /></li>
<li><img src="./img/photo02.jpg" alt="" title="Title02" /></li>
<li><img src="./img/photo03.jpg" alt="" title="Title03" /></li>
<li><img src="./img/photo04.jpg" alt="" title="Title04" /></li>
</ul>

3.サムネイル付

スライダーの画像が表示されているとき、
サムネイルには「active」というclassが付与されています。
cssデactive以外の時は画像を透明度50%で表示させるようにしています。

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $('.slider03').bxSlider({
    	pagerCustom: '.bx-pager'
		});
  });
</script>

HTML

<ul class="slider03">
<li><img src="./img/photo01.jpg" alt="" /></li>
<li><img src="./img/photo02.jpg" alt="" /></li>
<li><img src="./img/photo03.jpg" alt="" /></li>
<li><img src="./img/photo04.jpg" alt="" /></li>
</ul>

<div class="bx-pager clr">  
<a data-slide-index="0" href=""><img src="img/photo01.jpg" /></a>  
<a data-slide-index="1" href=""><img src="img/photo02.jpg" /></a>  
<a data-slide-index="2" href=""><img src="img/photo03.jpg" /></a>  
<a data-slide-index="3" href=""><img src="img/photo04.jpg" /></a>   
</div>

CSS

.bx-pager a {
	display: block;
	float: left;
	width: 25%;
}
.bx-pager a img {  
opacity: 0.5;  
filter: alpha(opacity=50);
width: 100%;
}  
.bx-pager a.active img {  
opacity: 1;  
filter: alpha(opacity=100);  
}

4.カルーセル

minSlides、maxSlidesの値に応じて
slideWidthやslideMarginを調整します。

デモは最大2枚、スマホサイズのときは1枚に設定しています。
さらにtickerを有効にして流れるようにしています。

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $('.slider04').bxSlider({
    	slideWidth: 450,
		auto: true,
		speed: 20000,
		pager: true,
	    minSlides: 1,
	    maxSlides: 2,
	    ticker: true
		});
  });
</script>

HTML

<ul class="slider04">
<li><img src="./img/photo01.jpg" alt="" /></li>
<li><img src="./img/photo02.jpg" alt="" /></li>
<li><img src="./img/photo03.jpg" alt="" /></li>
<li><img src="./img/photo04.jpg" alt="" /></li>
</ul>

最後に

今回ご紹介したサンプルは一部にすぎませんので、
ぜひぜひたくさんカスタマイズしてみてください。

デモで使用させていただいた写真素材もとても素敵です。
おしゃれでガーリィな写真素材がいっぱいの「GIRLY DOROP」様です。