Slick-Karussell-Folien, die übereinander liegen

Question

Ich versuche, Slick-Karussell als 100vh Slider für einen meiner Abschnitte auf meiner einzigen Seite Website zu verwenden.

Ich bin mit Jade, browserify, sass, usw. Hier ist der Ausgang:

ich vereinfacht die HTML/CSS in nur Hintergrundfarben, aber die aus seiner das gleiche auf dem tatsächlichen Inhalt.

Wie Sie sehen können, sind die Folien übereinander und sie sind auch geklont. Ich habe gelesen, dass Slick Klone gleitet, wenn Sie centerMode und unendliche Einstellungen verwenden.

Hier ist mein Code:

JADE:

section.services 
    .slick 
     .red 
     .green 
     .blue 

SCSS:

section.services { 
    @extend .padding0; 
    @include bgcolor(#fff); 

    .slick, .slick * { 
     outline: none; 
    } 
} 

.red { 
    height: 100px; 
    background: red; 
} 

.blue { 
    height: 100px; 
    background: blue; 
} 

.green{ 
    height: 100px; 
    background: green; 
} 

JS:

window.jQuery = window.$ = require('jquery'); 
slick = require('slick-carousel'); 

//DOM Ready 
$(function(){ 
    $('.slick').slick({ 
     slidesToShow: 1, 
     speed: 300, 
     autoplay: true, 
     dots: true 
    }); 
}); 

ich hier bin verloren, hoffe einer von euch kann Hilfe.

Answer 1

slick.scss wurde nicht in das Projekt geladen.