JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel">
  <div><a href="#"><img src="https://placehold.jp/300x150.png"></a></div>
  <div><a href="#"><img src="https://placehold.jp/300x150.png"></a></div>
  <div><a href="#"><img src="https://placehold.jp/300x150.png"></a></div>
</div>

CSS

.owl-item > div {
  width: 100%;
  padding-bottom: 100%; /* padding-bottomへの%指定は、横幅に対して何%か、という意味 */
  height: 0; /* padding-bottomだけで高さを指定したいので「0」にする */
  position: relative;
}
.owl-item > div > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.owl-item > div > a img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

JavaScript

$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
      loop   : false,
      margin : 10,
      nav    : false,
      dots   : false,
		items: 4,   //表示する項目数
		responsive : {　//レスポンシブ対応
			0 : {
				items : 1, //0以上
			},
			480 : {
				items : 2,// ブレイクポイント 480以上
			},
			768 : {
				items : 3,// ブレイクポイント 768以上
			},
			900 : {
				items : 4,// ブレイクポイント 768以上
			},
			1200 : {
				items : 5,// ブレイクポイント 768以上
			}			
		}
  });    
});