Slick JS - виден только первый слайд, другие всегда скрыты - PullRequest
Новая
       4

Slick JS - виден только первый слайд, другие всегда скрыты

0 голосов
/ 17 октября 2019

Я создал слайдер, содержащий 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>

1 Ответ

2 голосов
/ 17 октября 2019

Причина, по которой он не работает, заключается в том, что вы не включили slick.css в свой документ. Вы должны включить, как показано ниже: 

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

Вот рабочая JSFiddle

...