JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div id="avatar-carousel" class="owl-carousel">
  <div class="item item-logo">
         <img src="http://placehold.it/140x100" alt="">
    </div>
   </div>  
        <button id="click">
          click
        </button>

JavaScript

$(document).ready(function () {
  $("#avatar-carousel").owlCarousel({
  			nav: true,
        items: 5
    });
    
  });
  
  $("#click").click(function(){
  	$('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><img src="http://placehold.it/140x100" alt=""></div>'])
                    .trigger('refresh.owl.carousel');
  });