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>

编辑/更新：要显示当光标不在图像上时它会滑动，请参阅此屏幕截图： 光标

它可以用作小提琴，但不能在实际网页中使用。 http://jsfiddle.net/smlombardi/JqRhb/

4

2 回答 2

0

我对此问题有一个变体（滑动有效，链接无效），并按照以下说明使用第二个触摸库找到了解决方法：CarouFredSel Plugin using TouchSwipe with links not working

于 2013-03-18T16:45:34.957 回答
0

这是一个例子：http: //jsfiddle.net/ignaciocorreia/nAf53/

1 - 我添加了超过 2 个项目 -> 总共 20 个

<li><a href="#"><img src="http://lorempixum.com/75/75" /></a></li>

2 - 添加了这 3 行 css 以便我可以浮动<li>

#sd li {display: block;float: left;height: 100px;text-align: center;width: 100px;}
#sd li a {color: #8cabbf;display: block;font: 700 10px/10px Arial;text-decoration: none;}
#sd li a img {border: 1px solid #dfe9ee;}

3 - 导入 caroufredsel 和 touchswipe 库

4 - 加载 javascript

$(document).ready(function() {
    $("#sd").carouFredSel({    
        auto        : true,
        responsive  : true,
        scroll      : 4,
        items       : {
            visible : 4,
            width   : 200
        },
        prev: {
            button  : "#sd_prev"
        },
        next: {
            button  : "#sd_next"
        },
        swipe       : {
                onTouch     : true,
                onMouse     : true
            }
    });
});
于 2013-03-13T10:07:59.993 回答