Slick Slider Contribution

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
  <section class="regular slider">
      <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">
      <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">
  </section>

SCSS

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;
    }
    
    .slick-dots li {
          width: 6px;
    }

JavaScript

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