jquery - caroufredsel 在浏览器调整大小之前不可见

Question

我遇到了 caroufredsel 的问题我在 Asp.net Webforms 中使用的 jquery carousel 插件。在我调整窗口大小之前，轮播不会显示。我可以在最新版本的 Google Chrome 和 Firefox 中看到该问题。

Javascript

$(window).load(function() {
    $("#slider").carouFredSel({
            circular: true,         
            infinite: true,         
            responsive: true,      
            direction: "left",    
            width: "100%",
            height: "auto",
            auto: true,
            align: "center", 
            padding:0,
            items: {
                visible: 2,
                minimum: 2,
                width: "variable",
                height: "100%"
            },
            scroll: {
                items:1,
                pauseOnHover:true
            }
        });
    });

CSS

#slider .slider-wrapper {
    position:relative !important;
    display: block;
    padding-right: 10px;
    float: left;
    width:554px;
}

.... all other related to design

当我在 JSbin 中创建副本时，我能够重现该问题。全屏预览在此处 http://jsbin.com/uyewewo/3

Answer 1

如果你想要一个快速补丁，只需在添加轮播后触发调整大小

$( window ).resize()

在你的 $(window).load(function(){