かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

bxSliderが止まることの考察


スライダーは狭いスペースで多くのイメージを訴求できるので大変便利で、わたしはし後のアイキャッチとして使用することが多いです。

多くのスライダーが無償で提供されていますが、bxSliderはレスポンシブデザインでも使える有名なスライダーのうちのひとつですね!


今回は「bxSliderが止まる」ことに関して調べたことや考察を書いてみます。

そもそもスライダーは「写真集などじっくり見せたいイメージをずらっとページに並べるのではなくコンパクトに見せたい」というニーズから生まれており、デフォルトは手動でページをめくっていくものなので、コントロールやページャーがついているのですね!しかしアイキャッチ的に使いたい場合、停止されるのはちょっと困りものです。


bxSlider http://bxslider.com/ はこちらからダウンロードできます。

設置については、それをご紹介されているブログがたくさんありますので、そちらを参照されてください。


「jquery.bxslider」をダウンロードすると、bxslider.jsとbxslider.min.jsと入っており、どちらを使うか選べますが、オプションをカスタマイズするのであればjsのほうが分かりやすいです。


たくさんのオプションが用意されてますので、詳細は公式ページのこちらを参照くださいね!

bxSlider画面


自動でスライダーを流したい場合は、まずbxslider.jsの67行目

bxのオート設定

auto:true,

に変更します。冒頭でも書いたようにスライダーの基本は手動です。


さて、auto:trueにしてもPCであるいはモバイルで「bxSliderは止まる」という現象が起こることに困って、このブログに来られている方もいることと思います。


PCでbxSliderのオート再生が止まるタイミングは、下記の赤枠で囲った「コントロールやページャーに対してマウスイベントを行った時」です。

bxページャーコントローラー


考えてみてください。ページャーやコントロールを使った時、閲覧者はその写真を見たいからその操作をするわけです。スライダー側は、いつまで閲覧者がその写真を見続けるのか分かりませんので、オート再生を停止するわけです。またオート再生してほしい時は命令をくれよってことで、青枠で囲った再生・一時停止ボタンがあるわけです。ちなみにこれはデフォルトでは無効になっているので、60行目

autoControls: true,

と設定すれば出ます。ただ…これ…デザイン的に置きたくないひとも多いと思います。ちなみにこのスライダーの仕様は、ほとんどのスライダーが同じ作りですよ!悩ましいですね!!


単刀直入に言ってしまえば、デザインをとるかユーザーの利便性をとるかという問題になります。わたしのこのサイトに関していえば、スライダーは趣味の写真を3枚だけ流しているだけなので、ページャーやコントロールは消しました。

pager: false,

controls: false,

とすれば消えます。閲覧者は流れるスライダーを見るのみで、一切のマウス操作はできません。


さて、上記のように設定してもなお、モバイルファーストの時代ですからモバイルでスライダーを閲覧した時に「スワイプで止まる」ということが起こります。これも同じ理屈で、閲覧者がスワイプするということは写真を見たいのだな、とスライダーが判断してオート再生を停止するのです。スワイプはスワイプで別のオプションがあります。39行目~44行目

bxスライダーでスワイプを無効にする

touchEnabled:false;

oneToOneTouch:false;

preventDefaultSwipeX:false;

preventDefaultSwipeY:false;

にします。

細かく言うと、スワイプ有無効はtouchEnabledで設定します。oneToOneTouchは、スワイプした時のイメージのスイッチの仕方で、指にひっつくように自在に動かすかどうかです。preventDefaultSwipeXはX軸のスライド、preventDefaultSwipeYはY軸のスライド。これを全部無効にしてしまえば、一切のスライダー上のスワイプは無効になります。


画面の小さいモバイルでは、閲覧者がページスクロールを意図したスワイプをしたらスライダーが動いてしまうということも起こりますので、いっそのこと無効にしてしまったほうが利便性は高い気もします。このようなオプションの他にもいろいろとbxSliderにはついていますので、いろいろ検証してみてくださいね!


 2014/11補足

bxSliderは2012年末にVer.3.0から4.0へバージョンアップした際、レスポンシブ対応するために、いくつかのオプションが使えなくなっています。例えば、画面上に表示する画像枚数を指定することなど。PCフルサイズ表示で大変見栄えのする機能でしたが、レスポンシブデザインとスライダーは相性が悪いところも。どのように上手く見せていくか、工夫のしどころです。