title: I want to understand Slick.js
body: <p>Trying to learn slick.js, jquery plugin for creating carousels/sliders.
  But, while I was thinking that it is gonna be an easy-going solution for this common quest in web-dev, it is not, especially for the beginner like I am.</p>
  
  <p>So, I have designed the environment like it was proposed in the slick docs here:
  <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a> </p>
  
  <p>I want to make a carousel, like this one - for practice.
  <a href="https://i.stack.imgur.com/qFrXD.png" rel="nofollow noreferrer">Slider example</a></p>
  
  <p>So, nothing special, 4 images in a row, scrolling 1-by-1, infinitely loop, with arrows on the left and on the right side of the slider.</p>
  
  <p>Sounds pretty easy shot, as far as I could imagine reading the slick docs, but it is all contrary.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $('.sl').slick({
          infinite: true,
          slidesToShow: 4,
          slidesToScroll: 1,
          arrows: true
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: lightgrey;
  }
  
  .main {
      max-width: 800px;
      margin: 20px auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="slick/slick.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="slick/themes/slick-theme.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="main.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="main"&gt;
          &lt;div class="sl"&gt;
              &lt;div class="slider__item"&gt;
                  &lt;img src="img/slider-item1.png" alt="beige coat" class="slider__photo"&gt;
                  &lt;p class="slider__caption"&gt;Beige coat&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="slider__item"&gt;
                  &lt;img src="img/slider-item2.png" alt="grey coat" class="slider__photo"&gt;
                  &lt;p class="slider__caption"&gt;Grey coat&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="slider__item"&gt;
                  &lt;img src="img/slider-item3.png" alt="red coat" class="slider__photo"&gt;
                  &lt;p class="slider__caption"&gt;Red coat&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="slider__item"&gt;
                  &lt;img src="img/slider-item4.png" alt="blue coat" class="slider__photo"&gt;
                  &lt;p class="slider__caption"&gt;Blue coat&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="slick/slick.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>End the result is like, this - no arrows whatsoever and other functionality...</p>
  
  <p>When I set slidesToShow: 3, it gets some space and arrows emerge, but I can not understand its behaviour. </p>
  
  <p>Can I get some guidance from you on this example to grasp the Slick logic?</p>
  
  <p>Thank you in advance!</p>