優れた jQuery プラグインFlexsliderを使用して、Web ページにカルーセルを作成しています。1 つのことを除いて、すべてが完全に機能します。ユーザーがページの他の場所にある特定のリンクをクリックしたときに、スライダーのアニメーションを自動的に停止する必要があります。
これは可能ですか?
優れた jQuery プラグインFlexsliderを使用して、Web ページにカルーセルを作成しています。1 つのことを除いて、すべてが完全に機能します。ユーザーがページの他の場所にある特定のリンクをクリックしたときに、スライダーのアニメーションを自動的に停止する必要があります。
これは可能ですか?
ページの他の場所にある特定のリンクがクリックされたときにスライダーを停止させたい。リンクに「some-link」のクラスがあり、flexslider に「flexslider」のクラスがあると仮定しましょう。その場合、次の JS スニペットを使用できます。
$('.some-link').click(function() {
$('.flexslider').flexslider("pause");
});
コードが 内にある$(document).ready(function() { ... })
こと、またはスクリプトが「some-link」クラスのリンクを含むページの html の下にあることを確認する必要があります。それ以外の場合、そのクリック イベントを追加するセレクターは何にも一致しません (まだ存在しないため)。
ところで、@Guern のソリューションには、flexslider を実際に一時停止する方法に関する最も重要な情報が含まれていますが、あなたの質問はもう 1 つのステップを求めていました。2歳ですが、Google検索で出てきたので、今回答しています。
確かにそれは可能です。
この例では、スライドをクリックすると停止します。目的のページ リンクにクリック イベントをバインドするだけです。
$('.flexslider .slides > li').click(function() {
$('.flexslider').flexslider("pause");
});
その jQuery プラグインの関数のリストには、次のものがあります。
slider.pause() //Function: Pause slider slideshow interval
よくわかりませんが、次のように、この関数を使用して効果を停止できると思います。
$(#elm).flexslider().pause();
Web ページの Advanced タブで、flexslider プラグインのプロパティのリストを確認できます。