jQuery Caroufredsel issue: swipe events fail when carousel items have links

Question

I have a carousel built with the jQuery CarouFredSel plugin. It works fine. I have added swipe capability as per the site's instructions. I am using the jquery touchswipe plugin.

The issue is when the items in the carousel have hyperlinks (A tags), such as:

<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>

This will not swipe, unless you happen to get the space between the images. Then it works.

Oddly, I have also used the Zurb Foundation Orbit slider, and swipe events there work fine even if the images in the slider have links.

Any ideas? My initialization code:

    <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>

EDIT/UPDATE: to show that it will swipe when the cursor is not over an image, see this screenshot:

It works as a fiddle, but not in the actual web page. http://jsfiddle.net/smlombardi/JqRhb/

Answer 1

Here is an example: http://jsfiddle.net/ignaciocorreia/nAf53/

1 - I have added more than 2 items -> Total of 20

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

2 - Added this 3 lines of css so I can float the <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 - Import caroufredsel and touchswipe libraries

4 - Load the 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
            }
    });
});