jCarousel 图像不显示在 jQuery 滑块中

Question

我有一个 jQuery 滑动面板，其中未显示 jQuery 轮播。

示例：http://www.warface.co.uk/clients/warface。 co.uk/

单击显示仪表板以显示滑动面板。

我显示了按钮（上一个/下一个），但没有显示轮播。例如，我也添加了下面的轮播。

我有滑动面板的 CSS

#panel {
    width: 100%;
    height: 500px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: none;
}

，似乎删除了 display: none; 修复了它，但在页面加载时使滑块向下。

Answer 1

破解它：

您需要使用高度而不是显示来隐藏面板，如下所示：

#panel {
    width: 100%;
    height:0px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    }

然后通过将高度更改为 500 使您的 JS 在 js 中显示它，使您的 JS 如下：

$(document).ready(function() {

    // Expand Panel
   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").animate({height: "500px"},"slow");
    });    

    // Collapse Panel
    $("#close").click(function(e){
        e.preventDefault();
        $("div#panel").animate({height: "0px"},"slow");
    });     

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  

     $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });

});

注意附加的 PreventDefault() ，它可以防止页面跳转到顶部，当我在 jsfiddle 中尝试它时，这是必要的，但在实时应用程序中可能不需要，尽管如此，这通常是很好的做法。如果您想查看它的实际效果，可以在这里进行：http://jsfiddle.net/LiamBailey/ ERQzd/87/ 注意：由于 jsfiddle 中的窗口大小有限，您必须向下滚动才能到达关闭面板链接，从而导致您无法看到面板向上滑动，因为 PreventDefault，为了解决此问题，我添加了向上滚动一点 $("html,body").animate({scrollTop: target},"fast"); 但是您不需要这些，因为关闭面板链接在没有向下滚动。