使用 jQuery slideUp 显示时，Slick 轮播未启动

Question

我正在使用具有隐藏状态的 slick carousel 和 link 使用 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。但我需要光滑的旋转木马，因为它有一个很好的响应方法，bootstrap 旋转木马应用。

Answer 1

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

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

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

所以，有两点需要注意： - 光滑的内容未设置为 "display: none" 与 css - 内容在短暂延迟后被 js 隐藏 (setTimeout())。

使用 jQuery slideUp 显示时，Slick 轮播未启动

Slick carousel not initiating when showed with jQuery slideUp

jquery

slideup

slick.js