JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<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="flex">
  <div class="left">
    <p>.left</p>
  </div>
  <div class="right">
    <p>.right</p>
    <div id="owl-example" class="owl-carousel">
    </div>
  </div>  
</div>

CSS

.flex {
    display: flex;
}
.right, .left {
    width: 50%;
    background: orange;
    margin: 10px;
    position: relative;
}
.icon.icon-image {
    width: 100%;
    height: 100%;
    background: red;
}

JavaScript

// Slider activation
$(document).ready(function() {

    // Insert samples
    var img = `<div><img src="https://placehold.jp/150x150.png"></div>`;
    var svg = getSvg('image'); 
    for (var i = 0;  i < 10;  i++) {
        if( ( i % 2 ) != 0 ) {
            $("#owl-example").append(img);
        }else{
            $("#owl-example").append(svg);
        }
    }

    // owlCarousel
    const right = getSvg('icon-cheveron-right'); 
    const left  = getSvg('icon-cheveron-left');
    $("#owl-example").owlCarousel({
        loop: false,
        margin: 10,
        nav: true,
        autoHeight: true,
        navText: [left, right],    
        dots: false,
        responsiveBaseElement:$(".right")[0],
        responsive  :{
            0:{
                items:2
            },
            340:{
                items:3
            },        
            510:{
                items:4
            },
            680:{
                items:5
            },        
        }
    });    

});

// Prepend all SVG in body
$('body').prepend( prependtSvgs() );    
function prependtSvgs(){
    return `
    <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>  
            <!-- 画像 -->
            <symbol id="icon-image" viewBox="0 0 24 24">
            <path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354...