Slick carousel slides showing on top of each other

Question

I'm trying to use slick-carousel as a 100vh slider for one of my sections on my single page website.

I'm using jade, browserify, sass, etc. Here's the output:

I simplified the html/css into just background colors but the out its the same on the actual content.

As you can see the slides are showing on top of each other and they are also cloned. I read that slick clones slides when you use centerMode and infinite settings.

Here's my 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
    });
});

I'm lost here, hope one of you can help.

Answer 1

slick.scss wasn't being loaded into the project.