スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルを幾つか紹介しようと思います。
bxSliderについて
今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。
また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対象になっている場合はもちろん、もう対応する機会も少なくなってきているとは思いますがIE7でも問題なく使えるなど、幅広いデバイス・ブラウザで実装することができます。
実装に必要なファイルのダウンロードや公式の実装サンプルなどは下記で確認できます。
「bxSlider」の基本的な使い方や実装方法などに関しては上記の公式サイトはもちろん、様々なブログで紹介されていたりもするので省略します。
また、いずれのサンプルでも記載はしていませんが、ここで紹介しているサンプルは予めプラグインに同梱されているCSSを読み込んでいるものになります。
簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル 目次
1. ページャーやコントロール操作後、自動切り替え機能が停止するのを防ぐ
スライドの自動切り替えはオプションにauto: trueという記述をすることで実装することができるのですが、他のスライドに切り替えるためのページャーやコントロールを操作すると、自動切り替えの記述をしているのに自動切り替え機能が停止された状態になってしまいます。
これを回避したい場合は、jQueryのオプション指定箇所で以下のように記述することで回避できます。
jQuery
$(document).ready(function() {
var slider = $('#slider').bxSlider({
auto: true,
onSlideAfter: function() {
slider.startAuto();
}
});
});上記のようにonSlideAfterというコールバックとstartAutoというメソッドを組み合わせた記述をすることで、スライド切り替え後に自動切り替え機能をスタートするという動きを実装でき、ページャーやコントロール操作後も自動切り替え機能が停止してしまうのを防ぐことができます。
実際の動きは以下で確認できます。
2. スライド部分にもアクティブ時のクラスを付加
bxSliderにはページャー（公式サンプルでスライダー下に設置されている丸アイコン）を表示させることができるのですが、それらには現在表示されているスライドに応じてクラスが付加されるので、そのクラスを使って通常時とは異なるスタイルをあてることで現在どのスライドが表示されているかをわかりやすくできます。
以下はこれと同じような機能をスライド部分にも実装する方法で、HTMLやCSS側での特別な記述は必要なく、jQueryのオプション指定箇所を以下のように記述します。
jQuery
$(document).ready(function() {
var $slider = $('#slider');
var activeClass = 'active-slide';
$slider.bxSlider({
auto: true,
onSliderLoad: function() {
$slider.children('li').eq(1).addClass(activeClass);
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
$slider.children('li').removeClass(activeClass).eq(newIndex + 1).addClass(activeClass);
}
});
});まずonSliderLoadというコールバックを使って1枚目のスライドに任意のクラスを付加し、あとはスライドからクラスを消去する動きと切り替え後のスライドにクラスを付加するという動きをonSlideAfterというコールバックを使って実装したものになります。
付加されるクラスは上記ソースで赤文字表示しているactive-slideとなっているので、他のクラス名にしたい場合はこの部分を任意のものに変更します。
実際の動きは以下で確認でき、デモではクラスが付加されたのがわかりやすいようにactive-slideというクラスがつくと白いマスクがかかるスタイルをつけています。
スライド部分のアクティブクラスを用いて、CSSで要素を動かしてみる
先ほどの方法でスライド部分にもアクティブクラスが付加される動きを実装しましたが、これを用いることで例えばスライド切り替え後に要素を遅れて表示させるなどの動きをCSSで実装することが可能になります。
（もちろんわざわざCSS使わなくても、全てをjQuery使って実装するのも可能です。）
jQueryのオプション指定については先ほどど同様の記述をし、まずHTMLを以下のように記述します。
HTML
<ul id="slider">
<li>
<img src="img01.jpg" />
<p class="txt01">Lorem ipsum dolor sit amet, ...</p>
</li>
<li>
<img src="img02.jpg" />
<p class="txt02">Lorem ipsum dolor sit amet, ...</p>
</li>
<li>
<img src="img03.jpg" />
<p class="txt03">Lorem ipsum dolor sit amet, ...</p>
</li>
</ul>公式で記載されているようにul・li要素を使用し、各li要素の中にはそれぞれ画像とテキストを配置します。
その際、今回のサンプルではテキスト部分となるp要素へ動きを付けるので、それぞれに違うクラスを指定しておきます。
次にCSSを以下のように記述します。
CSS
#slider li p {
position: absolute;
display: inline-block;
width: 50%;
padding: 2em;
background-color: rgba(255,255,255,.6);
opacity: 0;
transition: all .5s;
}
#slider .active-slide p {
opacity: 1;
}
#slider li .txt01 {
bottom: 0;
right: 3em;
}
#slider .active-slide .txt01 {
bottom: 3em;
}
#slider li .txt02 {
top: 16em;
left: 5em;
}
#slider .active-slide .txt02 {
top: 18em;
}
#slider li .txt03 {
top: 3em;
right: 0;
}
#slider .active-slide .txt03 {
right: 3em;
}HTMLとCSSをそれぞれ上記のように記述したものを表示確認すると、スライドが切り替わった後にテキストがふわっと表示されるようになり、それぞれ表示される位置や方向などはCSSでそれぞれのクラスに指定した位置から表示されます。
テキストが表示されるまでもう少し間をあけたいという時は、CSSのtransition-delayやjQueryのdelayを使えば調整できます。
実際の動きは以下で確認できます。
今回は簡単なサンプルでしたが、例えばオプションのコールバックでonSlideBeforeも使用すれば、スライド切り替え後だけでなく切り替え前にも別のエフェクトを付けるといったこともできます。
複雑な動きとかつけるなら無理してbxSlider使わずにそういった動きやオプションが豊富に用意されているプラグイン探せばって感じですが、現状でbxSliderを使っているけど少し動きをつけたいと思うぐらいであれば、上記のような形で実装をすることができると思います。
3. 画像が流れ続けるティッカースライドを実装する
こちらは公式サンプルにティッカースライドの実装方法として載っているものとほぼ変わらないんですが、たまにコンテンツとして見かけることがある、ひたすら画像が流れている幅いっぱいのティッカースライドを実装する方法です。
用意できる画像が少ない場合などは少し手を加える必要があったりするので、いっそのこと他の方法で実装したほうが手っ取り早いこともありますが、他の部分で既にbxSliderを使っていて画像もある程度用意できるということであれば、親要素などに幅指定をせずにjQueryのオプション指定箇所に下記のように記述すれば実装できます。
jQuery
$(document).ready(function() {
$('#slider').bxSlider({
ticker: true,
minSlides: 3,
maxSlides: 10,
slideWidth: 300,
slideMargin: 0,
speed: 50000
});
});オプションでtickerを有効化し、あとはminSlidesやmaxSlidesといったオプションをそれぞれ変更すれば、画像が流れ続けるティッカースライドを実装することができます。
実際の動きは以下で確認できます。
※このサンプルはjquery.bxslider.cssに記述されている.bx-viewportへのスタイルの一部を無効にしています。
4. フルスクリーンスライド
ブラウザによって実装できないので使える場面は限られますが、bxSliderを使ってフェードで切り替わるフルスクリーンスライドを実装する方法です。
実装にはそれぞれ以下のように記述します。
HTML
<ul id="slider">
<li style="background-image:url(img01.jpg);"></li>
<li style="background-image:url(img02.jpg);"></li>
<li style="background-image:url(img03.jpg);"></li>
<li style="background-image:url(img04.jpg);"></li>
<li style="background-image:url(img05.jpg);"></li>
<li style="background-image:url(img06.jpg);"></li>
</ul>CSS
/* Reset jquery.bxslider.css */
.bx-viewport {
left: 0;
box-shadow: none;
border: none;
}
#slider li {
height: 100vh;
background: center / cover no-repeat;
}jQuery
$(document).ready(function() {
$('#slider').bxSlider({
mode: 'fade',
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: false,
touchEnabled: false
});
});まずHTMLは表示させたい画像をli要素内のimgとしてではなく、それぞれのli要素の背景画像として指定します。
今回のサンプルではHTMLにstyle属性を使って直接記述していますが、擬似クラスやそれぞれのli要素にクラスを付けるなどしてCSSで指定するのでももちろん問題ありません。
次にCSSでli要素に対してvh (viewport height)を使って高さが画面いっぱいになるように指定し、backgroundではbackground-size: coverやbackground-position: no-repeatといった指定をしておきます。.bx-viewportのスタイルに関しては、jquery.bxslider.cssのスタイルを消しているだけなので、必要なければ記述する必要はありません。
あとはjQueryでそれぞれオプションを指定していけば、フェードで切り替わるフルスクリーンスライドを実装することができます。
実際の動きは以下で確認できます。
以上、公式サイトには載っていない「bxSlider」の実装サンプルでした。
ここまで書いといてあれですけど、特にティッカースライドとフルスクリーンに関しては無理矢理感あるので尚更bxSliderでやらなくてもって感じですが、こんなのも実装できるよってことで紹介してみました。
紹介しているものでもっと簡単にできるとか、他にもこんなこともできるよっていうのがあれば是非教えてください。