title: Slick CSS carousel/slider vertical instead of horizontal
body: <p>I am trying to get slick slider as an auto scrolling carousel working in a webpage I am building. What I am trying to achieve is <a href="https://codepen.io/anon/pen/WyWrJG" rel="nofollow noreferrer"><strong>this effect</strong></a>, a horizontal line of images that scrolls slowly all the time.</p>
  
  <p>When I run my code, however, the images load in a vertical stack, with no scrolling at all. I have copied the slick folder into the same folder as my <code>index.html</code>. What is it that I am missing here? </p>
  
  <p>I have this in my CSS:</p>
  
  <pre><code>html,
  body {
    height: 100%
  }
  
  .slider {
    width: 300px;
    margin: 2px auto;
    text-align: center;
    padding: 10px;
    color: white;
    .parent-slide {
      padding: 15px;
    }
    img {
      display: block;
      margin: auto;
    }
  }
  
  .slider:before,
  .slider:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100px;
    top: 0;
    height: 100%;
    pointer-events: none;
    /*makes the linkes behind clickable.*/
  }
  
  .slider:before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }
  
  .slider:after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }
  </code></pre>
  
  <p>and this in my HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="slider"&gt;
      &lt;div class="slide"&gt;
        &lt;img src="images/stills/apt.jpg" alt="" class="img-responsive" /&gt; &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="images/stills/apt.jpg" alt="" class="img-responsive" /&gt; &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="images/stills/apt.jpg" alt="" class="img-responsive" /&gt; &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="images/stills/apt.jpg" alt="" class="img-responsive" /&gt; &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="images/stills/apt.jpg" alt="" class="img-responsive" /&gt; &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="images/stills/apt.jpg" alt="" class="img-responsive" /&gt; &lt;/div&gt;
      &lt;div class="slide"&gt;
        &lt;img src="images/stills/apt.jpg" alt="" class="img-responsive" /&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $('.slider').slick({
          autoplay: true,
          autoplaySpeed: 0,
          speed: 2200,
          arrows: true,
          centerMode: true,
          slidesToShow: 3,
          slidesToScroll: 1,
          cssEase: 'linear'
        });
      });
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>