Slick Carousel - 5 items in slide to 1 on mobile

Question

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.

http://kenwheeler.github.io/slick/#settings

Desktop

<slide 1>
 [1][2]
[3][4][5]
</slide 1>
<slide 2>
 [6][7]
[8][9][10]
</slide 2>

What I currently have on Mobile too

<slide 1>
 [1][2]
[3][4][5]
</slide 1>
<slide 2>
 [6][7]
[8][9][10]
</slide 2>

What I need on Mobile

<slide 1>
 [1]
</slide 1>
<slide 2>
 [2]
</slide 2>
<slide 3>
 [3]
</slide 3>
<slide 4>
 [4]
</slide 4>
<slide 5>
 [5]
</slide 5>
<slide 6>
 [6]
</slide 6>
<slide 7>
 [7]
</slide 7>
<slide 8>
 [8]
</slide 8>
<slide 9>
 [9]
</slide 9>
<slide 10>
 [10]
</slide 10>

JSFiddle https://jsfiddle.net/tr0pec2m/

    $(function () {
      $(".regular").slick({
        dots: true,
        infinite: false,
        slidesToShow: 1,
        slidesToScroll: 1
      });
    });

    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;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
  <section class="regular slider">
    <div>
      <img src="http://placehold.it/150x100?text=1">
      <img src="http://placehold.it/150x100?text=2">
      <img src="http://placehold.it/150x100?text=3">
      <img src="http://placehold.it/150x100?text=4">
      <img src="http://placehold.it/150x100?text=5">
    </div>
    <div>
      <img src="http://placehold.it/150x100?text=6">
      <img src="http://placehold.it/150x100?text=7">
      <img src="http://placehold.it/150x100?text=8">
      <img src="http://placehold.it/150x100?text=9">
      <img src="http://placehold.it/150x100?text=10">
    </div>
  </section>

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.

I need the cards to be split into multiple slides, so Slick can then deal with all 10 slides instead.

Answer 1

If possible, add all the slider items as the direct child and use the responsive config of the slick slider

  $(".regular").slick({
    dots: true,
    infinite: false,
    vertical: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    responsive: [
      {
        breakpoint: 500,
        settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        }
      }
    ]        
  });

https://jsfiddle.net/tr0pec2m/2/

Answer 2

You Have to change HTML strcture, and add js parameter

  <section class="regular slider">
      <img src="https://placehold.it/150x100?text=1">
      <img src="https://placehold.it/150x100?text=2">
      <img src="https://placehold.it/150x100?text=3">
      <img src="https://placehold.it/150x100?text=4">
      <img src="https://placehold.it/150x100?text=5">
      <img src="https://placehold.it/150x100?text=6">
      <img src="https://placehold.it/150x100?text=7">
      <img src="https://placehold.it/150x100?text=8">
      <img src="https://placehold.it/150x100?text=9">
      <img src="https://placehold.it/150x100?text=10">
  </section>


 $(function () {
      $(".regular").slick({
        dots: true,
        infinite: false,
        slidesToShow: 1,
        slidesToScroll: 1,
         responsive: [
            {
              breakpoint: 1000,
              settings: {
                slidesToShow: 6,
                slidesToScroll: 1
              }
            },
            {
              breakpoint: 800,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 1
              }
            },
            {
              breakpoint: 500,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1
              }
            }                
           ]
      });
    });