title: Slick carousel slides showing on top of each other
body: <p>I'm trying to use slick-carousel as a <code>100vh</code> slider for one of my sections on my single page website.</p>
  
  <p>I'm using jade, browserify, sass, etc. Here's the output:</p>
  
  <p><a href="https://i.stack.imgur.com/kK7vD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kK7vD.png" alt="enter image description here"></a></p>
  
  <p>I simplified the html/css into just background colors but the out its the same on the actual content.</p>
  
  <p>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.</p>
  
  <p>Here's my code:</p>
  
  <p>JADE:</p>
  
  <pre><code>  section.services
      .slick
        .red
        .green
        .blue
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>window.jQuery = window.$ = require('jquery');
  slick = require('slick-carousel');
  
  //DOM Ready
  $(function(){  
      $('.slick').slick({
          slidesToShow: 1,
          speed: 300,
          autoplay: true,
          dots: true
      });
  });
  </code></pre>
  
  <p>I'm lost here, hope one of you can help.</p>