簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル

スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。
もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載っていない実装サンプルをいくつか紹介しようと思います。

bxSliderについて

今回使用する「bxSlider」はコンテンツスライダーやカルーセルといった動きを実装することができるjQueryプラグインで、手軽に実装できることに加え、オプションも豊富に用意されているのが特徴のプラグインです。
また、レスポンシブやスワイプといった機能も実装されているので、スマートフォンやタブレットといったデバイスが対象になっている場合はもちろん、もう対応する機会も少なくなってきているとは思いますがIE7でも問題なく使えるなど、幅広いデバイス・ブラウザで実装することができます。
実装に必要なファイルのダウンロードや公式の実装サンプルなどは下記で確認できます。

jQuery Content Slider | Responsive jQuery Slider | bxSlider

「bxSlider」の基本的な使い方や実装方法などに関しては上記の公式サイトはもちろん、様々なブログで紹介されていたりもするので省略します。
また、いずれのサンプルでも記載はしていませんが、ここで紹介しているサンプルは予めプラグインに同梱されているCSSを読み込んでいるものになります。

ページャーやコントロール操作後、自動切り替え機能が停止するのを防ぐ

スライドの自動切り替えはオプションにauto: trueという記述をすることで実装することができるのですが、他のスライドに切り替えるためのページャーやコントロールを操作すると、自動切り替えの記述をしているのに自動切り替え機能が停止された状態になってしまいます。
これを回避したい場合は、jQueryのオプション指定箇所で下記のように記述することで回避できます。

jQuery

$(function() {
  var slider = $('#slider').bxSlider({
    auto: true,
    onSlideAfter: function() {
      slider.startAuto();
    }
  });
});

上記のようにonSlideAfterのコールバックとstartAutoというメソッドを組み合わせた記述をすることで、スライド切り替え後に自動切り替え機能をスタートするという動きを実装でき、ページャーやコントロール操作後も自動切り替え機能が停止してしまうのを防ぐことができます。

実際の動きは以下で確認できます。

Demo

スライド部分にもアクティブ時のclassを付加

bxSliderにはページャー（公式サンプルでスライダー下に設置されている丸アイコン）を表示させることができるのですが、それらには現在表示されているスライドに応じてclassが付加されるので、そのclassを使って通常時とは異なるスタイルをあてることで現在どのスライドが表示されているかをわかりやすくできます。
以下はこれと同じような機能をスライド部分にも実装する方法で、HTMLやCSS側での特別な記述は必要なく、jQueryのオプション指定箇所を下記のように記述します。

jQuery

$(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枚目のスライドに任意のclassを付加し、あとはスライドからclassを消去する動きと切り替え後のスライドにclassを付加するという動きをonSlideAfterのコールバックを使って実装したものになります。
付加されるclassは上記サンプルコードでハイライト表示している.active-slideとなっているので、他のclass名にしたい場合はこの部分を任意のものに変更します。

実際の動きは以下で確認でき、デモではclassが付加されたのがわかりやすいように.active-slideというclassがつくと白いマスクがかかるスタイルをつけています。

Demo

スライド部分のアクティブclassを用いて、CSSで要素を動かしてみる

先ほどの方法でスライド部分にもアクティブclassが付加される動きを実装しましたが、これを用いることで例えばスライド切り替え後に要素を遅れて表示させるなどの動きをCSSで実装することが可能になります。
jQueryのオプション指定については先ほどど同様の記述をし、まず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要素へ動きを付けるので、それぞれに違うclassを指定しておきます。

次に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でそれぞれのclassに指定した位置から表示されます。
テキストが表示されるまでもう少し間をあけたいという時は、CSSのtransition-delayやjQueryの.delay()を使えば調整できます。

実際の動きは以下で確認できます。

Demo

今回は簡単なサンプルでしたが、例えばオプションのコールバックでonSlideBeforeも使用すれば、スライド切り替え後だけでなく切り替え前にも別のエフェクトを付けるといったこともできます。
複雑な動きとかつけるなら無理してbxSlider使わずにそういった動きやオプションが豊富に用意されているプラグイン探せばって感じはありますが、現状でbxSliderを使っているけど少し動きをつけたいと思うぐらいであれば、上記のような形で実装をすることができると思います。

画像が流れ続けるティッカースライドを実装する

こちらは公式サンプルにティッカースライドの実装方法として載っているものとほぼ変わらないんですが、たまにコンテンツとして見かけることがある、ひたすら画像が流れている幅いっぱいのティッカースライドを実装する方法です。
用意できる画像が少ない場合などは少し手を加える必要があったりするので、いっそのこと他の方法で実装したほうが手っ取り早いこともありますが、他の部分で既にbxSliderを使っていて画像もある程度用意できるということであれば、親要素などに幅指定をせずにjQueryのオプション指定箇所に下記のように記述すれば実装できます。

jQuery

$(function() {
  $('#slider').bxSlider({
    ticker: true,
    minSlides: 3,
    maxSlides: 10,
    slideWidth: 300,
    slideMargin: 0,
    speed: 50000
  });
});

オプションでtickerを有効化し、あとはminSlidesやmaxSlidesといったオプションをそれぞれ変更すれば、画像が流れ続けるティッカースライドを実装することができます。

実際の動きは以下で確認でき、このサンプルはjquery.bxslider.cssに記述されている.bx-viewportへのスタイルの一部を無効にしています。

Demo

フルスクリーンスライド

ブラウザによって実装できないので使える場面は限られますが、bxSliderを使ってフェードで切り替わるフルスクリーンスライドを実装する方法です。
実装にはそれぞれ下記のように記述します。

<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>

/* Reset jquery.bxslider.css */
.bx-viewport {
  left: 0;
  box-shadow: none;
  border: none;
}
#slider li {
  height: 100vh;
  background: center / cover no-repeat;
}

jQuery

$(function() {
  $('#slider').bxSlider({
    mode: 'fade',
    speed: 2000,
    pause: 8000,
    auto: true,
    pager: false,
    controls: false,
    touchEnabled: false
  });
});

まずHTMLは表示させたい画像をli要素内のimgとしてではなく、それぞれのli要素の背景画像として指定します。
今回のサンプルではHTMLにstyle属性を使って直接記述していますが、擬似クラスやそれぞれのli要素にclassを付けるなどしてCSSで指定するのでももちろん問題ありません。

次にCSSでli要素に対してvhを使って高さが画面いっぱいになるように指定し、backgroundではbackground-size: cover;やbackground-position: no-repeat;といった指定をしておきます。
.bx-viewportのスタイルに関しては、jquery.bxslider.cssのスタイルを消しているだけなので必要なければ記述する必要はありません。

あとはjQueryでそれぞれオプションを指定していけば、フェードで切り替わるフルスクリーンスライドを実装することができます。

実際の動きは以下で確認できます。

Demo