title: Slick Carousel - 5 items in slide to 1 on mobile
body: <p>Inside each 'slide' of my slickCarousel I have 5 cards displayed (on desktop). On mobile however, I need the first card to be as slide one, second card to be as slide 2 etc.</p>
  
  <p><a href="http://kenwheeler.github.io/slick/#settings" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/#settings</a></p>
  
  <p><strong>Desktop</strong></p>
  
  <pre><code>&lt;slide 1&gt;
   [1][2]
  [3][4][5]
  &lt;/slide 1&gt;
  &lt;slide 2&gt;
   [6][7]
  [8][9][10]
  &lt;/slide 2&gt;
  </code></pre>
  
  <p><strong>What I currently have on Mobile too</strong></p>
  
  <pre><code>&lt;slide 1&gt;
   [1][2]
  [3][4][5]
  &lt;/slide 1&gt;
  &lt;slide 2&gt;
   [6][7]
  [8][9][10]
  &lt;/slide 2&gt;
  </code></pre>
  
  <p><strong>What I need on Mobile</strong></p>
  
  <pre><code>&lt;slide 1&gt;
   [1]
  &lt;/slide 1&gt;
  &lt;slide 2&gt;
   [2]
  &lt;/slide 2&gt;
  &lt;slide 3&gt;
   [3]
  &lt;/slide 3&gt;
  &lt;slide 4&gt;
   [4]
  &lt;/slide 4&gt;
  &lt;slide 5&gt;
   [5]
  &lt;/slide 5&gt;
  &lt;slide 6&gt;
   [6]
  &lt;/slide 6&gt;
  &lt;slide 7&gt;
   [7]
  &lt;/slide 7&gt;
  &lt;slide 8&gt;
   [8]
  &lt;/slide 8&gt;
  &lt;slide 9&gt;
   [9]
  &lt;/slide 9&gt;
  &lt;slide 10&gt;
   [10]
  &lt;/slide 10&gt;
  </code></pre>
  
  <p><strong>JSFiddle</strong>
  <a href="https://jsfiddle.net/tr0pec2m/" rel="nofollow noreferrer">https://jsfiddle.net/tr0pec2m/</a></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>    $(function () {
        $(".regular").slick({
          dots: true,
          infinite: false,
          slidesToShow: 1,
          slidesToScroll: 1
        });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    html, body {
        margin: 0;
        padding: 0;
      }
  
      * {
        box-sizing: border-box;
      }
  
      .slider {
        width: 50%;
        margin: 25px auto;
      }
  
      .slick-slide {
        margin: 0px 20px;
      }
  
        .slick-slide img {
          border: 1px solid #000;
        }
  
      .slick-prev:before,
      .slick-next:before {
        color: black;
      }
  
      .hidde-sldie img {
        border: 5px solid red;
      }
  
      .show-hide-slide-btn {
        text-align: center;
        margin: 0 auto;
        display: block;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/&gt;
  &lt;link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/&gt;
  &lt;script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"&gt;&lt;/script&gt;
    &lt;section class="regular slider"&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/150x100?text=1"&gt;
        &lt;img src="http://placehold.it/150x100?text=2"&gt;
        &lt;img src="http://placehold.it/150x100?text=3"&gt;
        &lt;img src="http://placehold.it/150x100?text=4"&gt;
        &lt;img src="http://placehold.it/150x100?text=5"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/150x100?text=6"&gt;
        &lt;img src="http://placehold.it/150x100?text=7"&gt;
        &lt;img src="http://placehold.it/150x100?text=8"&gt;
        &lt;img src="http://placehold.it/150x100?text=9"&gt;
        &lt;img src="http://placehold.it/150x100?text=10"&gt;
      &lt;/div&gt;
    &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The responsive settings are not quite what I need here, the responsive settings will deal with the number of SLIDES to appear. Currently I only have 1 slide with multiple items inside as far as slickCarousel knows.</p>
  
  <p>I need the cards to be split into multiple slides, so Slick can then deal with all 10 slides instead.</p>