Question

我有一个使用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>

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

它可以作为一个小提琴，但不是在实际的网页中。 http://jsfiddle.net/smlombardi/JqRhb/

Answer 1

以下是一个示例： http://jsfiddle.net/ignaciocorreia/nAf53/

1 - 我添加了2件以上的商品 - ＆gt;共计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
            }
    });
});

Answer 2

我对此问题有一些变化（滑动有效，链接没有），并根据这些说明找到了使用第二个触摸库的变通方法：CarouFredSel Plugin using TouchSwipe with links not working

jQuery Caroufredsel问题：当轮播项目有链接时，滑动事件失败

2 个答案: