Slick JS - 只有第一张幻灯片是可见的，其他的总是隐藏的

Question

我创建了一个包含 div 和文本的滑块。但是在幻灯片更改时只显示第一张幻灯片，其余的幻灯片在更改时隐藏。

请检查这个工作小提琴，展示问题：https://jsfiddle.net/rp82g5c1/

代码用于初始化 Slick JS：

$('#main-content').slick({
    arrows: false,
    slidesToShow: 1,
    fade: true,
    adaptiveHeight: true,
    responsive: [{
        breakpoint: 767,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
            variableWidth: false
        }
    }]
});

我的 HTML：

<div class="main-wrapper">
    <div class="faq-controls">
        <div class="faq-navigation back">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </div>
        <div class="faq-navigation forward">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </div>
    </div>
    <div id="main-content">

        <div class="single-qa">
            <div class="content-wrap">
                <div class="question-wrap">
                    <div class="question">
                        <h2 class="text-center">Q.</h2>
                        <h3>First Question?</h3>
                    </div>
                </div>
                <div class="answer-wrap">
                    <div class="answer">
                        <h2 class="text-center">A.</h2>
                        <p>First Answer.. Blah Blah.</p>
                    </div>                          
                </div>
            </div>
        </div>

        <div class="single-qa">
            <div class="content-wrap">
                <div class="question-wrap">
                    <div class="question">
                        <h2 class="text-center">Q.</h2>
                        <h3>Second Question?</h3>
                    </div>
                </div>
                <div class="answer-wrap">
                    <div class="answer">
                        <h2 class="text-center">A.</h2>
                        <p>Second Answer.. Blah Blah.</p>
                    </div>                          
                </div>
            </div>
        </div>

    </div>
</div>

Answer 1

它不起作用的原因是您没有在文档中包含slick.css。您应该包括以下内容：

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />

这里是工作JSFiddle