私は素晴らしいCarouFredSel JQuery カルーセル プラグインを使用しています。これには、ハンドヘルド デバイス用 のJQuery TouchSwipeライブラリを統合するための機能も含まれています。
カルーセル要素は div であり、div 内には<ahref>タグでラップされた画像とテキストがあります。
すべてが正常に機能しますが、カルーセル要素 (この場合は div) にリンクが含まれていると、さまざまなモバイル デバイスでスワイプ効果が機能しないことに気付きました。
画像/テキストの周りのリンクを削除すると、スワイプ モーションは正常に機能します。まるでpreventDefault()逆に働いているかのようです。画像の周りのリンクを削除し、テキストをリンクとして残すと、スワイプはテキストではなく画像に対して機能します。
アイテムをリンクとして簡単にクリックできますが、リンクの場合はスワイプできません。
特に CarouFredsel でこの問題を経験した人はいますか?
どうもありがとう、SO。
要素のタッチスワイプはデフォルトで無効になっています。
http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.htmlを参照してください。
リンクから: デフォルトでは $.fn.swipe.defaults.excludedElements の値は "button, input, select, textarea, a, .noSwipe, " です。リストを置換またはクリアするには、excludedElements 配列をリセットします。それに追加するには、次のようにします (前のコンマを忘れないでください) ...
excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });
私のモーダルはすべてアンカー要素の子だったので、プラグインのデフォルトを変更するだけになりました。
excludedElements:"button, input, select, textarea, .noSwipe"
TouchSwipe と CarouFredSel プラグイン内でリンクを使用できるかどうか知りたいのですが、うまくいくように思われる回避策を見つけました。
うまくいけば、それは誰かを助けるでしょう。
最終的には、2 番目のタッチ jquery ライブラリであるTouchWipeを使用しました。
CarouFredSel プラグインを呼び出すときに、swipe パラメーターを true に設定します。
$('#carousel-slider').carouFredSel({
width: '100%',
prev: '#prev-propslider',
next: '#next-propslider',
swipe: true
});
次に、TouchSwipe ライブラリと Touchwipe ライブラリの両方を呼び出します (これが問題かどうかはわかりませんが、swipe:trueリンクのない別のスライダーには通常の TouchSwipe パラメータを使用しています)、TouchWipe プラグインのカスタム イベントを呼び出す別の関数を作成しました。
$('#carousel-slider').touchwipe({
wipeLeft: function() {
$('#carousel-slider').trigger('next', 1);
},
wipeRight: function() {
$('#carousel-slider').trigger('prev', 1);
}
});
これが誰かの役に立てば幸いですが、TouchSwipe と CarouFredSel がタグで機能するかどうかを知りたいです。実際に<a href>動作する例が見つからないからです。
私の問題も解決した、excludedElements のソリューションに感謝します。それについて考えたことはありません。
ただし、touchwipe プラグインを個別に使用する必要はありません。caroufredsel プラグインには、touchswipe の構成オプションとして「swipe.options」があります。caroufredsel オプションを見る
touchswipe plugin のすべてのオプションを使用できると思います。
Caroufredsel はすでに統合されており、タッチスワイプと互換性があります。
$(document).ready(function () {
$('#foo2').carouFredSel({
auto: false,
responsive: false,
items: {
visible: 3,
width: 100
},
width: 600,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
swipe: {
onMouse: true,
onTouch: true
}
});
});