JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<div class="mfp-with-zoom owl-carousel">
  <div class="item"><a href="#"><img src="https://avatanplus.com/files/resources/original/572d207f4f8891548846f15e.jpg"></a></div>
  <div class="item"><a href="#"><img src="https://avatanplus.com/files/photos/mid/58fb24136c94315b9504ebf5.jpg"></a></div>
    <div class="item"><a href="#"><img src="https://avatanplus.com/files/photos/mid/5903730201ed315bb5793fd8.jpg"></a></div>
    <div class="item"><a href="#"><img src="https://avatanplus.com/files/photos/mid/5903730201ed315bb5793fd8.jpg"></a></div>
</div>

CSS

.owl-carousel img, .item {
  /*height: 150px !important;
  width: auto !important;*/
}

JavaScript

$('.owl-carousel').owlCarousel({
		loop:false,
		margin:10,
		nav: true,
		navText: [
			"назад",
			"вперед"
		],
		//items:5,
		responsive:{200:{items:3},600:{items:3},1000:{items:3}},
		lazyLoad : true,
	});