JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<a href="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" data-fancybox="group">
<img src="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" alt="preview">
</a>
</div>
<div class="item">
<a href="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" data-fancybox="group">
<img src="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" alt="preview">
</a>
</div>
<div class="item">
<a href="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" data-fancybox="group">
<img src="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" alt="preview">
</a>
</div>
<div class="item">
<a href="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" data-fancybox="group">
<img src="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" alt="preview">
</a>
</div>
<div class="item">
<a href="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" data-fancybox="group">
<img src="http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg" alt="preview">
</a>
</div>
...
JavaScript
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
items:5,
autoplay:true,
autoplayTimeout:1000
})