JSFiddle - React, Tailwind, and code Playground

by stic_k

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="slider">
  <div class="s1">1</div>
  <div class="s2">2</div>
  <div class="s3">3</div>
  <div class="s4">4</div>
</div>

SCSS

.slider {
  position: relative;
  z-index: 1;
  width: 350px;
  background: #ccc;
  margin: 50px auto 0;
  div {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    .s1 {
      background: gray;
    }
    .s2 {
      background: pink;
    }
    .s3 {
      background: orange;
    }
    .s4 {
      background: blue;
    }
  }
}
.slider {
  position: relative;
  .slick-slide {
    margin: 0 20px;
    .slick-list {
      margin: 0 -20px;
    }
  }
  .prev{
    position: absolute;
    z-index: 3;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
  }
  .next{
    position: absolute;
    z-index: 3;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
  }
}

JavaScript

$(document).ready(function() {

  $(window).on('resize',function(){
var widthResize = $( window ).width();
if(widthResize <= 480){
	  $('.slider').slick({
  	loop: true,
    infinity: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    prevArrow: '<div class="prev"></div>',
    nextArrow: '<div class="next"></div>'
  });
}
else{
    $('.slider').slick({
    settings: 'unslick'
    });
}

});

});