JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider-wrapper">
  <div class="slider">
    <div class="slider-item">1</div>
    <div class="slider-item">2</div>
    <div class="slider-item">3</div>
    <div class="slider-item">4</div>
    <div class="slider-item">5</div>
  </div>
</div>

SCSS

.slider-wrapper {
  background: red;
}

.slider {
  position: relative;
  max-width: 340px;
  margin: 20px auto 0;

  .slick-arrow {
    position: absolute;
    top: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    cursor: pointer;

    &.arrow-left {
      left: -34px;
    }

    &.arrow-right {
      right: -34px;
    }
  }

  .slick-current {
    .slider-item {
      margin-left: 0;
    }
  }

  .slider-item {
    width: 90px !important;
    height: 90px;
    margin: 0 10px;
    text-align: center;
    color: blue;
    font-size: 20px;
    font-weight: bold;
    border: 5px solid green;
    background: #fff;
  }
}

JavaScript

$('.slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        speed: 300,
        draggable: false,
        dots: false,
        arrows: true,
        infinite: true,
        variableWidth: true,
        prevArrow: '<a class = "arrow-left"><svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0004 1L1.05403 11.9463L12.0004 23" stroke="#2C2B2A" stroke-width="1.5" stroke-miterlimit="10" stroke-linejoin="bevel"/></svg></a>',
        nextArrow: '<a class = "arrow-right"><svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.00061 1L11.9469 11.9463L1.00061 23" stroke="#2C2B2A" stroke-width="1.5" stroke-miterlimit="10" stroke-linejoin="bevel"/></svg></a>',
        swipe: true
    })