JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="terentev-code-1-list">
            <div class="slider-top owl-carousel owl-theme" id="top-owl-carousel">
                <div class="slide slide-1">
                   <div class="bottom-particles">
                       
                   </div>
                    <div class="description">
                        <div>
                            <h2>
                                ЦИФРОВЫЕ БИЛБОРДЫ<br>
                                НОВОГОДНИЙ PRE-SALE
                            </h2><br>
                            <h4>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, qui! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quidem nesciunt rerum cum numquam vero repudiandae optio nostrum incidunt reprehenderit.
                            </h4><br>
                            <button>Подробнее</button>
                        </div>
                    </div>
                    <div class="img">
                        <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:relative" class="svg" preserveAspectRatio="xMinYMin meet" viewBox="-30 0 500 500"><set id="b" attributeName="visibility" begin="0s" dur="1s" to="hidden" xlink:href="#a"/><g id="a" fill="none" stroke="#fff" stroke-width="2"><path stroke-dasharray="540" d="M0 0h180v90H0z"><animate attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" values="540; 0"/></path><path stroke-dasharray="516" d="M5 5h170v80H5z"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s"...

CSS

.terentev-code-1-list #top-owl-carousel { width: 100%; height: auto; padding: 0; margin: 0; }
.terentev-code-1-list #top-owl-carousel .owl-dots { position: absolute; top: 360px; right: 50px; }
.terentev-code-1-list #top-owl-carousel .owl-prev span { position: absolute; top: 150px; left: 20px; font-size: 40pt; color: #a8a8a8; z-index: 20; }
.terentev-code-1-list #top-owl-carousel .owl-next span { position: absolute; top: 150px; right: 20px; font-size: 40pt; color: #a8a8a8; z-index: 20; }
.terentev-code-1-list #top-owl-carousel .slide { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 60px 20px 60px; -webkit-box-sizing: border-box; box-sizing: border-box; color: white; font-weight: 1000; }
.terentev-code-1-list #top-owl-carousel .slide h2 { font-size: 30pt; }
.terentev-code-1-list #top-owl-carousel .slide .description { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 60%; }
.terentev-code-1-list #top-owl-carousel .slide .img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 40%; overflow: hidden; }
.terentev-code-1-list #top-owl-carousel .slide .img #svg1 { width: 200%; }
.terentev-code-1-list #top-owl-carousel .slide .img #svg2 { width: 200%; }
.terentev-code-1-list #top-owl-carousel .slide .img #svg3 { width: 200%; }
.terentev-code-1-list #top-owl-carousel .slide .img .svgObject { width: auto; margin: auto; position: absolute; top: 25%; left: 25%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.terentev-code-1-list #top-owl-carousel .slide button { color: white; border: 1px white solid; background: transparent;...

JavaScript

$("#top-owl-carousel").on('changed.owl.carousel', function(event){

            var mySvg1Anim = $("#svg1");
            var mySvg1AnimCopy = mySvg1Anim.clone(true);
            var mySvg2Anim = $("#svg2");
            var mySvg2AnimCopy = mySvg2Anim.clone(true);
            var mySvg3Anim = $("#svg3");
            var mySvg3AnimCopy = mySvg3Anim.clone(true);
            var mySvg4Anim = $("#svg4");
            var mySvg4AnimCopy = mySvg4Anim.clone(true);
            var mySvg5Anim = $("#svg5");
            var mySvg5AnimCopy = mySvg5Anim.clone(true);

            mySvg1Anim.before(mySvg1AnimCopy);
            mySvg1Anim.last().remove();

            
            mySvg2Anim.before(mySvg2AnimCopy);
            mySvg2Anim.last().remove();

            
            mySvg3Anim.before(mySvg3AnimCopy);
            mySvg3Anim.last().remove();
            
            
            mySvg4Anim.before(mySvg4AnimCopy);
            mySvg4Anim.last().remove();

            
            mySvg5Anim.before(mySvg5AnimCopy);
            mySvg5Anim.last().remove();
    });
    $("#top-owl-carousel").owlCarousel({
        items: 1,
        smartSpeed: 1000,
        loop: true,
        mouseDrag: true,
        touchDrag: true,
        nav: true,
        dots: true,
        autoplay: true,
        autoplayTimeout: 10000,
        autoplayHoverPause: true,
    });