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

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

Я создал слайдер, содержащий элементы 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:

 {amp}lt;div class="main-wrapper"{amp}gt; {amp}lt;div class="faq-controls"{amp}gt; {amp}lt;div class="faq-navigation back"{amp}gt; {amp}lt;i class="fa fa-chevron-left" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="faq-navigation forward"{amp}gt; {amp}lt;i class="fa fa-chevron-right" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="main-content"{amp}gt; {amp}lt;div class="single-qa"{amp}gt; {amp}lt;div class="content-wrap"{amp}gt; {amp}lt;div class="question-wrap"{amp}gt; {amp}lt;div class="question"{amp}gt; {amp}lt;h2 class="text-center"{amp}gt;Q.{amp}lt;/h2{amp}gt; {amp}lt;h3{amp}gt;First Question?{amp}lt;/h3{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="answer-wrap"{amp}gt; {amp}lt;div class="answer"{amp}gt; {amp}lt;h2 class="text-center"{amp}gt;A.{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt;First Answer.. Blah Blah.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="single-qa"{amp}gt; {amp}lt;div class="content-wrap"{amp}gt; {amp}lt;div class="question-wrap"{amp}gt; {amp}lt;div class="question"{amp}gt; {amp}lt;h2 class="text-center"{amp}gt;Q.{amp}lt;/h2{amp}gt; {amp}lt;h3{amp}gt;Second Question?{amp}lt;/h3{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="answer-wrap"{amp}gt; {amp}lt;div class="answer"{amp}gt; {amp}lt;h2 class="text-center"{amp}gt;A.{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt;Second Answer.. Blah Blah.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector