使用 jQuery slideUp 显示时，光滑的轮播没有启动答案

【问题标题】：Slick carousel not initiating when showed with jQuery slideUp使用 jQuery slideUp 显示时，光滑的轮播没有启动
【发布时间】：2015-03-11 07:18:49
【问题描述】：

我正在使用带有隐藏状态的 slick carousel 和一个使用 jQuery slideUp/slideDown 切换它的链接：

<a href="#" id="carousel-toggle"><span class="fa fa-navicon"></span></a>
<div id="carousel" style="display: none;">
    <div class="carousel">
        <div>your content 1</div>
        <div>your content 2</div>
        <div>your content 3</div>
        <div>your content 4</div>
    </div>
</div>

这是我的 jQuery：

$('.carousel').slick();
jQuery(document).ready(function($){
    $('#carousel-toggle').on('click', function(){
        var content = $(this).parents().find('#carousel');
        if (content.is(':visible'))
            content.slideUp("slow");
        else
            content.slideDown("slow");
    });
});

它工作正常，但是当我第一次切换 #carousel 时，它显示所有幻灯片都搞砸了，当我第一次单击导航时它开始正常工作，并且切换它并不混乱它了。但是当我使默认状态可见时，它会正常启动。

这个 JSFIDDLE 解释了一切：http://jsfiddle.net/walidov/8Lfyfcut/

如何在隐藏状态时启动它？顺便说一句，我正在使用 bootstrap3。但我需要光滑的轮播，因为它有一个很好的响应方法，引导轮播不适用。

【问题讨论】：

标签： jquery slideup slick.js

【解决方案1】：

似乎可行的是在短暂延迟后用 js 而不是 css 隐藏内容。延迟是为了给光滑一些时间来启动。

setTimeout(function(){    
    var content = $('#carousel');
    content.slideUp(10);
}, 10);

解决方案：http://jsfiddle.net/8Lfyfcut/12/

所以，有两点需要注意： - 使用 css 将光滑的内容设置为“显示：无” - 内容在短暂延迟（setTimeout()）后被 js 隐藏。

【讨论】：