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/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div id="owl_about_main_slider" class="owl-carousel">
    <div data-item="0"><h2>This is First Slider <span>x</span></h2></div>
    <div data-item="1"><h2>This is Second Slider <span>x</span></h2></div>
    <div data-item="2"><h2>This is Third Slider <span>x</span></h2></div>
    <div data-item="3"><h2>This is Fourth Slider <span>x</span></h2></div>
</div>

CSS

html,body{
  	margin: 0;
  	padding: 0;
  	height: 100%;
  }
  span:hover { cursor: pointer; }
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
  left: 0;
  display: flex;
}
body .owl-next{
  right: 0;
  display: flex;
}
body .owl-prev i, body .owl-next i{
  margin: auto;
}
#owl_about_main_slider div h2{
text-align: center;
}
.owl-carousel.off {
    display: block;
}

JavaScript

$(document).ready(function() {
  startCarousel();
  $('span').on('click', function() {
    var dat = $(this).parent().parent().data();
    console.log(dat);
    var itm = dat.item;
    $(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
  })
});


function startCarousel(){
  $("#owl_about_main_slider").owlCarousel({
     navigation : true, // Show next and prev buttons
     slideSpeed : 500,
     margin:10,
     paginationSpeed : 400,
     autoplay:true,
     items : 1,
     itemsDesktop : false,
     itemsDesktopSmall : false,
     itemsTablet: false,
     itemsMobile : false,
     loop:true,
     nav:true,
     navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
}