caousel panel slick

by Himanshu Joshi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class='container'>
  <div class="slider">
    <div class="slide-block">
      <img src="https://s22.postimg.cc/9c3ikfxo1/image.jpg" alt="">
    </div>
    <div class="slide-block">
      <img src="https://s22.postimg.cc/jm5xjov9d/image.jpg" alt="">
    </div>
    <div class="slide-block">
      <img src="https://s22.postimg.cc/7kajpj6ld/image.jpg" alt="">
    </div>
    <div class="slide-block">
      <img src="https://s22.postimg.cc/ciy2422oh/image.jpg" alt="">
    </div>
    <div class="slide-block">
      <img src="https://s22.postimg.cc/kbopw10xt/image.jpg" alt="">
    </div>
  </div>
</div>

SCSS

.slider {
  display:flex;
  img {
    border-left: solid 2px #00A5E3;
    border-right: solid 2px #00A5E3;
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  .slick-dots{
    bottom:0;
      li.slick-active{
        button{
          &:before{
            color:#9b9b9b;
            opacity: 0.75;
          }
        }
      }
      li{
        button{
          &:before{
                font-family: slick;
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: rgba(202, 201, 202, 0.4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
          }
        }
      }
  }
}

JavaScript

let maxWidth = 768,
  slickVar = {
    dots: true,
    prevArrow: false,
    nextArrow: false,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 9999,
        settings: "unslick"
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 2,
          infinite: true,
          dots: true
        }
      }
    ]
  };

const toCarousel = () => {
  $(".slider").not('.slick-initialized').slick(slickVar);
};
$(".slider").on('destroy', function(event, element){
	console.log(event);
  console.log(element);
  });

$(window).on('resize', function() {
  var width = $(window).width();
  if (width < maxWidth) {
    toCarousel();
  }
});