JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<!-- this line is missing -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="container">
  <div class="slider">
    
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
  <div class="slides">
    <img src="http://via.placeholder.com/500x500" alt="">
  </div>
</div>
</div>

CSS

.container{
  max-width:1200px;
  margin:0 auto;
}
.slider{
  display:flex;
  .slides{
    display:flex;
    justify-content:center;
  }
}

JavaScript

$('.slider').slick({
  arrows:true,
  autoplaySpeed:1000
});