web-dev-qa-db-ja.com

リンクが機能しないTouchSwipeを使用するCarouFredSelプラグイン

私は素晴らしい CarouFredSel JQueryカルーセルプラグインを使用しています。これには、ハンドヘルドデバイス用の JQuery TouchSwipe ライブラリも統合するための機能が含まれています。

カルーセル要素はdivであり、div内には_<ahref>_タグで囲まれた画像とテキストがあります。

すべてが正常に機能しますが、カルーセル要素（この場合はdiv）にリンクが含まれていると、さまざまなモバイルデバイスでのスワイプ効果が機能しないことに気付きました。

画像/テキストの周りのリンクを削除すると、スワイプ動作は正常に機能します。 preventDefault()が逆に機能しているようです。画像の周りのリンクを削除し、テキストをリンクのままにすると、スワイプはテキストではなく画像に対して機能します。

アイテムをリンクとして簡単にクリックできます。リンクの場合はスワイプできませんIS。

特にCarouFredselでこの問題を経験した人はいますか？

どうもありがとう、そう。

touchcaroufredsel
14
RCNeil

要素のタッチスワイプはデフォルトで無効になっています。

http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html を参照してください。

リンクから：デフォルトでは、$。fn.swipe.defaults.excludedElementsの値は「button、input、select、textarea、a、.noSwipe」です。リストを置き換えるかクリアするには、excludeElements配列を再設定します。それに追加するには、次のようにします（先頭のコンマを忘れないでください）...

excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });

すべてのモーダルがアンカー要素の子であったため、プラグインのデフォルトを変更するだけで終わりました。

excludedElements:"button, input, select, textarea, .noSwipe"
29
Mike

<a>のcarouFredSelは、「inside」をスワイプするとうまく機能しません。 excludedElementsを使用できますが、Ipadでは<a>（longTap）を使用するために指を保持する必要があります。それはユーザーにとっては良くありません。 carouFredSel（{swipe :( option {tap：function ...を使おうとすると、機能しません（少なくとも私の場合は）。

私の解決策は、スワイプ（touchSwipe）を個別に使用することです。

$(".carusel").swipe({
  excludedElements: "button, input, select, textarea, .noSwipe",
  swipeLeft: function() {
    $('.carusel').trigger('next', 4);
  },
  swipeRight: function() {
    $('.carusel').trigger('prev', 4);
  },
  tap: function(event, target) {
    window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
  }
});
8
Stanley Shauro

TouchSwipeとCarouFredSelプラグイン内のリンクを使用できるかどうかを知りたいのですが、うまくいくように見える回避策を見つけました。

うまくいけば、それは誰かを助けるでしょう。

最終的に2番目のタッチjqueryライブラリ TouchWipe を使用しました。

CarouFredSelプラグインを呼び出すときに、スワイプパラメーターをtrueに設定します。

$('#carousel-slider').carouFredSel({
        width: '100%',
        prev: '#prev-propslider',
        next: '#next-propslider',
        swipe: true
});

次に、TouchSwipeライブラリとTouchwipeライブラリの両方を呼び出します（これが重要かどうかはわかりませんが、リンクのない別のスライダーには通常のTouchSwipe swipe:trueパラメーターを使用しています）、TouchWipeプラグインのカスタムイベントを呼び出す別の関数を作成しました：

$('#carousel-slider').touchwipe({
        wipeLeft: function() {
            $('#carousel-slider').trigger('next', 1);
        },
        wipeRight: function() {
            $('#carousel-slider').trigger('prev', 1);
        }
});

これが誰かに役立つことを願っていますが、実際に機能する例が見つからないため、TouchSwipeとCarouFredSelが<a href>タグで機能するかどうかを知りたいと思います。

2
RCNeil

ExcludeElementsを使用したソリューションに感謝します。これにより、私の問題も修正されました。そのことを考えたことはありません。

ただし、touchwipeプラグインを個別に使用する必要はありません。caroufredselプラグインには、touchswipeの構成オプションとして「swipe.options」があります。 caroufredselオプション を参照してください

そこではすべてを使用できます touchswipeプラグインのオプション 、私は思います。

1
Sabrina

以下の機能を使用して、スワイプ後のクリックを有効にすることができます。

`$('.class').swipe({
  swipe: function(event, direction, distance, duration, fingerCount) {},
  click: function(event, target) {
    $(target).click();
  },
  threshold: 75
});`

https://stackoverflow.com/a/11919170/3223427

0
user3223427

Caroufredselはすでに統合されており、タッチスワイプと互換性があります。

  1. Tochswipejsライブラリを追加する
  2. カルフレセル構成にタッチイベントを追加します

JAVASCRIPT RESULT

 $(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
         }
     });
 });

これが動作するデモです

0
Ignacio Correia