Javascript Caroufedsel使用链接标记断开

我试图使用本教程（）创建一个包含我公司产品的旋转木马。然而，每个产品都有一个网站，我想引导它

当我向代码的任何部分添加一个标记时，它都可以正常工作，直到只有少数部分是链接。但在所有这些情况下，它会断裂，有时几分钟不加载，有时甚至根本不加载。它有时需要刷新才能被用户看到

    <div>
    <a href="http://minhasbrewery.com/lazymutt">
    <img src="images/lazymutt/lazymutt_albertawheatale_02.png" alt="Lazy Mutt Alberta Wheat Ale" />
        <span>Lazy Mutt Alberta Wheat Ale</span>
    </a>
    </div>

而Js是

 <script src="js/jquery.carouFredSel-6.2.1.js"></script>      
  <script>
  $(function() {

var $c = $('#carousel'),
    $w = $(window);

$c.carouFredSel({
    align: false,
    items: 21,
    scroll: {
        items: 1,
        duration: 2000,
        timeoutDuration: 0,
        easing: 'linear',
        pauseOnHover: 'immediate'
        }
});


$w.bind('resize.example', function() {
    var nw = $w.width();
    if (nw < 990) {
        nw = 990;
    }

    $c.width(nw * 3);
    $c.parent().width(nw);

}).trigger('resize.example');

});

  </script>

$（函数（）{
变量$c=$（“#旋转木马”），
$w=$（窗口）；
$c.carouFredSel({
align:false，
项目：21，
滚动：{
项目：1，
期限：2000年，
超时持续时间：0，
“线性”，
pauseOnHover:“立即”
}
});
$w.bind（'resize.example'，function（）{
var nw=$w.width（）；
如果（nw<990）{
nw=990；
}
$c.宽度（西北*3）；
$c.父项（）宽度（nw）；
}).trigger（'resize.example'）；
});

我无法理解为什么这会破坏或破坏插件，它只是一个链接，那么在加载插件后它是如何做的，以及如何修复它？

因此我使用百分比（%）使每个项目的宽度随窗口大小调整大小，这就破坏了它。当我把它改成精确的像素量时，它工作得很好

#carousel div {width:17px;}

---

您能创建一个JSFIDLE以便更容易调试吗

#carousel div {width:17px;}