jqueryのbxsliderをマウスオーバーで停止・マウスアウトで再開したい

Question

bxslider
http://bxslider.com

マウスオーバーしたらスライドが停止。
そして、マウスアウトしたらスライドが再び動くようにしたいです。
停止はするのですが再開してくれません。

bxsliderを動かしているコードはこちらです。
下の方は数秒後に停止するようにコールバックで指定しています。

$(document).ready(function(){
var slide = $('#bxslider01').bxSlider({
auto: true,
pause: 2000,
slideSelector: 'div.bxslider',
speed: 3500,
autoHover:true,
pager:true,
minSlides: 1,
maxSlides: 1,
moveSlides: 5,
slideWidth: '1000',
onSlideAfter: function(){slide.startAuto(); },
onSliderLoad: function(currentIndex){
$( '#bxslider01' ).delay( 10*1000 ).queue( function () {
slide.stopAuto();
});
}
});
});


解決策やコードの訂正箇所など、御教示いただけますと幸いです。

よろしくお願いいたします。

fujillin · Accepted Answer

ANo1、2、3です。
補足を見ました。

最初のご質問文のコードとは違うようですね。
補足でご提示のスクリプトでは最後の閉じ括弧が抜けているようですが、コピペのとき抜け落ちたものと解釈しました。

補足のスクリプトを見ただけですが・・・（テストしていません）
＞  var out = $("#slider li a").mouseout(～～)
＞  var over = $("#slider li a").mouseover(～～)
は、bxsliderとは別個にautoHoverと同様のイベント処理を設定しているように思いますが、optionでもautoHoverが設定されているので、処理がダブっていることになりませんか？
（同様の処理を2回行うだけで、実害はないかもしれませんが…）


＞ただ、１０秒経過し止まってから、マウスアウトすると動いてしまいます。
一方で、10秒後にautoを停止しても、上記の（個別設定の）イベント処理は活きていますので、outで設定されている通り、マウスアウトが発生すればautoStartするものと思います。
これによって、ご質問の状況となっているのではないでしょうか。

ANo2の最後にも書きましたように、別個に設定しているイベント処理を止めたければ、これを停止（削除）する必要があります。
とはいうものの、ご提示のスクリプトの場合は、そもそもイベント処理を設定する必要がないように思えますが…？


回答の最初の時点では、bxsliderをまったく知りませんでしたが、だいぶ勉強させていただきました。（笑）

fujillin · Answer

ANo1、2です。　こんにちは。

＞実際に動かしている理想的な場面を順番に文字で説明すると・・・
最も標準的（？）に期待する機能ですよね。
ライブラリのオプションもそれを意図して作られているものだと思いますし、私の環境では問題なく実現できています。
（ANo2の（1）はこのケースのつもりでした）
（2）以降はそれ以外で質問者様がご希望なさっているのと、元の仕様が若干異なっているのかも知れないと推測して書いたものです。

・・・ということですので、残念ながらこちらの環境では問題が再現しません。
それなので、即、スクリプトの問題とは限らない可能性もあります。
こちらでは現象が再現できないこともあって、どうやらお力にはなれそうにありませんね。
（fx37、IE8でテストして、両方ともautoHoverは問題なく動作しています。）

配布元の例にautoHoverを設定したものがあれば、それが動作するかどうかを確認するのが手っ取り早いのですが、ざっと見たところ無いようですね。


質問者様の方でいくつかのブラウザでテストしてみて、現象が特定のブラウザの問題なのか、質問者様の設置環境の問題なのかなど切り分けてゆくとよろしいかと思います。（多分、fxなどでは動作するものと推測しますが…）
その際には、autoとautoHoverのみを設定するようなごくシンプルな内容で、まずは試してみることをお勧めします。

fujillin · Answer

ANo1です。

＞そのオプションは上のコードでも指定しているのですが
大変失礼いたしました。
ライブラリ自体をよく知らないので、ご提示のコードもよく確認していませんでした。
・・・ってことで、改めて確認してみました。

（1）ご提示のままの状態で、マウスオバー/アウトだけを行えばご希望の動作をしていると思いますが・・・
　　（こちらの環境ではちゃんと機能しています）

（2）ただし、pagerをクリックした時に停止するのが元々の仕様のようで、（想像では）その後もautoが効くようにしたいと考えてonSlideAfterを設定なさっているのだと想像しました。
　　（これも、こちらの環境ではちゃんと機能しています）

（3）しかしながら、同じpagerを2回以上続けてクリックすると停止します。
これがご質問の現象でしょうか？　それとも上記(1)、(2)の状況でも停止してしまうのでしょうか？
ご質問文だと、（1）のマウスオバー/アウトでも動作しないというように読めるので、どのような状態なのかよくわかりません。


以下は、（3）の2回以上のクリック時の現象と仮定しての回答になります。
bxsliderのコードは見ていないので想像しただけですが、2回目のクリックでは「既に表示中のスライドであることを判定して、スライドの表示処理をパスしているのではないか」と考えました。

つまり、以下の順です。（正しいかどうかは不明です）
　1）1回目のクリックでbxsliderが対象ページを表示。
　　　autoはストップ。イベントが発生。
　2）ユーザオプションのcallbackでautoを再実行
　3）2回目のクリックでbxsliderはスライドは行わない。autoはストップ。
　　 スライドしないのでイベントは発生しない。
この結果、ストップしたままになるのではないかと推測しました。

そこで、対策として考えたのは、onslideAfterを利用するのをやめて、「pagerをクリックしたらautoStartする」イベントを単独（別に）に設定するという方法です。
試してみたところ、残念ながら再スタートしませんでした。
一方で、まったく別のボタンを設けておいてそれに再スタート機能をセットして実行すれば、ちゃんと再スタートしました。

ということで、再度考えたのは、bxslider側もこのイベントを取っているので、実行順が確実にbxsliderの処理より後になるようにしておかないとうまくなさそうということ。（先に再スタートしても止められてしまうので）
・・・で、最終的に
　$(".bx-pager a.bx-pager-link").click(function(){ 
　　setTimeout(function(){ slide.startAuto(); }, 1); 
　});
とすることで、再スタートするようになりました。
（セレクタはデフォルト環境で指定してますので、ご利用の環境に合わせてください）

以上のところまでしかテストしていませんけれど、コードをちゃんと確認したわけではありませんので、整合のとれた方法であるかどうかはわかりませんが、一応、動作はすると思います。
（手元のIE8でbxsliderは動作しますがご提示のオプションだと動作しなかったので、fx37でのみテストしています）


また、10秒後に一旦ストップなさっているようですが、その後は、pagerをクリックした場合にもautoにならないようになさりたいのであれば、ストップ処理の際に上記のイベントを削除しておく必要があるでしょう。

fujillin · Answer

bxsliderは知りませんけれど、配布サイトをみてみると
　autoHover
というオプションが用意されているみたいですが、
それではダメなのでしょうか？

　http://bxslider.com/options

jqueryのbxsliderをマウスオーバーで停止・マウスアウトで再開したい

ANo1、2、3です。

ANo1、2です。

ANo1です。

bxsliderは知りませんけれど、配布サイトをみてみると

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング