JSFiddle - React, Tailwind, and code Playground

by bogatyr77

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<div class="owl-carousel owl-theme">
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
</div>

<div class="owl-dots">
  <button role="button" class="owl-dot active"><span>1</span></button>
  <button role="button" class="owl-dot"><span>2</span></button>
  <button role="button" class="owl-dot"><span>3</span></button>
  <button role="button" class="owl-dot"><span>4</span></button>
</div>

JavaScript

$('.owl-carousel').owlCarousel({
  loop: false,
  margin: 10,
  nav: false,
  dots: false,
  dotsData:true,
  dotsContainer: '.owl-dots',
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})