2

jQuery CarouFredSel プラグインで構築されたカルーセルがあります。それは正常に動作します。サイトの指示に従って、スワイプ機能を追加しました。jquery touchswipe プラグインを使用しています。

問題は、カルーセル内のアイテムに次のようなハイパーリンク (A タグ) がある場合です。

<ul id="carousel">
   <li><a href="foo.html"><img src="kitten.jpg"/></a><li>
   <li><a href="foo.html"><img src="puppy.jpg"/></a><li>
</ul>

たまたま画像間にスペースを確保しない限り、これはスワイプしません。その後、動作します。

奇妙なことに、私は Zurb Foundation Orbit スライダーも使用しており、スライダー内の画像にリンクが含まれていても、そこでのスワイプ イベントは正常に機能します。

何か案は？私の初期化コード:

    <script>
    $("#sd").carouFredSel({
        auto        : false,
        responsive  : true,
        scroll      : 4,
        items       : {
            visible : 4,
            width   : 200
        },
        prev: {
            button  : "#sd_prev"
        },
        next: {
            button  : "#sd_next"
        },
        swipe       : {
                onTouch     : true,
                onMouse     : true
            }

    });
</script>

編集/更新: カーソルが画像上にないときにスワイプすることを示すには、次のスクリーンショットを参照してください。 カーソル

これはフィドルとして機能しますが、実際の Web ページでは機能しません。 http://jsfiddle.net/smlombardi/JqRhb/

4

2 に答える 2

0

この問題にはさまざまなバリエーションがあり (スワイプは機能するが、リンクは機能しない)、次の手順に従って 2 番目のタッチ ライブラリを使用する回避策を見つけました。

于 2013-03-18T16:45:34.957 に答える