Question

我正在尝试使用本教程（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>

我无法理解为什么这会破坏或破坏插件，它只是一个链接，所以在加载此插件之后它会如何解决？

Answer 1

所以我使用百分比（％）来使每个项目的宽度随窗口大小调整大小并且打破了它。我改变它的时刻和确切的像素数量它工作得很好。

#carousel div {width:17px;}

Caroufredsel打破了链接标签

1 个答案: