The site has a carousel Owl-carousel . I wrote a script that if you switch the carousel sliders, the SVG picture should be played again.

Copy SVG, insert SVG and delete the latest SVG.

The problem is that the first SVG in the first slider plays normally, the second SVG in the second slider also works fine, the rest do not want to play. Just appear without animation. I attach the code

To make my page display normally, select Bottom Results in the JSFiddle settings.

 $("#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: 100000, autoplayHoverPause: true, }); 
 .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; padding: 10px 15px 10px 15px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .terentev-code-1-list #top-owl-carousel .slide button:hover { color: white; background: transparent; border-radius: 5px; padding: 15px 20px 15px 20px; } .terentev-code-1-list #top-owl-carousel .slide-1 { background: #36d1dc; background: -webkit-gradient(linear, left top, right top, from(#30b7c1), to(#5b86e5)); background: linear-gradient(to right, #30b7c1, #5b86e5); height: 450px; width: 100vw; } .terentev-code-1-list #top-owl-carousel .slide-2 { background: #1c92d2; background: -webkit-gradient(linear, left top, right top, from(#5b86e5), to(#7f51a7)); background: linear-gradient(to right, #5b86e5, #7f51a7); height: 450px; width: 100vw; } .terentev-code-1-list #top-owl-carousel .slide-3 { background: #ef3b36; background: -webkit-gradient(linear, left top, right top, from(#7f51a7), to(#355C7D)); background: linear-gradient(to right, #7f51a7, #355C7D); height: 450px; width: 100vw; } .terentev-code-1-list #top-owl-carousel .slide-4 { background: #4ac29a; background: -webkit-gradient(linear, left top, right top, from(#355C7D), to(#C06C84)); background: linear-gradient(to right, #355C7D, #C06C84); height: 450px; width: 100vw; } .terentev-code-1-list #top-owl-carousel .slide-5 { background: #ef3b36; background: -webkit-gradient(linear, left top, right top, from(#C06C84), to(#30b7c1)); background: linear-gradient(to right, #C06C84, #30b7c1); height: 450px; width: 100vw; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" /> <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" repeatCount="1" values="516; 0" /> </path> <path stroke-dasharray="100" d="M85 90v100"> <animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0" /> </path> <path stroke-dasharray="100" d="M95 90v100"> <animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0" /> </path> <path stroke-dasharray="150" d="M75 190h30v5H75v-5z"> <animate fill="freese" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="150; 0" /> </path> </g> </svg> </div> </div> <div class="slide slide-2"> <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="svg2" 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" repeatCount="1" values="516; 0"/></path><path stroke-dasharray="100" d="M85 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="100" d="M95 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="150" d="M75 190h30v5H75v-5z"><animate fill="freese" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="150; 0"/></path></g></svg> </div> </div> <div class="slide slide-3"> <div class="description"> <div> <h2> ЦИФРОВЫЕ БИЛБОРfgfДЫ<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="svg3" 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" repeatCount="1" values="516; 0"/></path><path stroke-dasharray="100" d="M85 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="100" d="M95 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="150" d="M75 190h30v5H75v-5z"><animate fill="freese" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="150; 0"/></path></g></svg> </div> </div> <div class="slide slide-4"> <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"> <object data="img/city.svg" type="image/svg+xml" id="svg4" class="svgObject"></object> </div> </div> <div class="slide slide-5"> <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"> <object data="img/city.svg" type="image/svg+xml" id="svg5" class="svgObject"></object> </div> </div> </div>

    1 answer 1

    I found a solution, wrote a script

     $("#top-owl-carousel").on('translated.owl.carousel', function(event){ $(this).find(".active #svg1, #svg2, #svg3, #svg4, #svg5").css("display","none"); $(this).find(".active #svg1").css("display","block"); $(this).find(".active #svg2").css("display","block"); $(this).find(".active #svg3").css("display","block"); $(this).find(".active #svg4").css("display","block"); $(this).find(".active #svg5").css("display","block"); }); $("#top-owl-carousel").on('changed.owl.carousel', function(event){ $(this).find(".active #svg1").css("display","none"); });