Caroufedsel用链接标记中断

new_frontenddev

我正在尝试使用本教程(http://coolcarousels.frebsite.nl/c/23/)用我公司的产品创建轮播。但是,每个产品都有一个我要引导的网站。

当我在代码的任何部分中添加标签时,在只有少数几个链接之前,它可以正常工作。但是,所有这些都会损坏,有时几分钟不会加载,有时甚至根本无法加载。有时需要刷新才能使用户看到它。

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

这就是我要更改的一切,它似乎使插件变慢了。

    /*=========================
    CAROUSEL
    ==========================*/

    .ourproducts{width:100%;
                 margin:0 auto;
                 overflow:hidden;
                 position:relative;
        background:url(../images/pattern_bg.jpg);
                    }

    #wrapper {
        border-top: 1px solid #ccc;
        width: 100% !important;
        height: 50%;
        margin-top: -1px;
        position: static;
        left: 0;
        top: 50%;



    }


    .caroufredsel_wrapper{position:relative; z-index:400 !important; width:100% !important;}

    #carousel {
        margin-top: -100px;
        background:inherit;


    }
    #carousel div {
        text-align: center;
        width: 2%;
        max-width:200px;
        height:auto;
        float: left;
        position: relative;
        margin:0 0.5%;
        margin-top:5%;

    }
    #carousel div img {
        border: none;
        width:100%;
        display:block;
        margin:0 auto;
        margin-bottom:0;
    }
    #carousel div span {
        display: none;
    }
    #carousel div:hover span {
        background-color: #333;
        color: #fff;
        font-family:'hattori_hanzolight', sans-serif;
        letter-spacing:1px;
        font-size: 90%;
        line-height: 110%;
        display: inline-block;
        width:auto;
        min-width:200px;
            padding: 5%;
        margin: 0 0 0 -50px;
        position: absolute;
        top: -30px;
        left: 50%;
        border-radius: 2px;
    }

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>

我不明白为什么这会破坏或破坏插件,它只是一个链接,因此加载该插件后如何处理以及如何解决?

new_frontenddev

因此,我使用percent(%)来使每个项目的宽度随着窗口大小调整大小,而这又打破了它。当我将其更改为确切的像素数量时,它可以正常工作。

#carousel div {width:17px;}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章