Make Slider Easy
Owl Slider for Tilda

Как добавить слайдер-карусель OWL в Tilda

Сайт разработчиков слайдера
https://owlcarousel2.github.io/OwlCarousel2/index....

Коды слайдеров вставляются в блок ДРУГОЕ►Т123

В коде заменили:
ID нашего блока T123 - #rec00000000
Basic Owl

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
    background: #e8f7ff;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>

<!--Основа слайдера  -->
<div class="owl-carousel owl-theme">
 <div class="item"><img src="https://clck.ru/F3i36" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3i3E" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3i3Y" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3i3e" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3i3p" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3i3w" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3i4C" alt=""></div>
</div>

<!--Кнопки слайдера  -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>

<script>
//Прописываем ID нашего блока
    $(document).ready(function() {
    var sliderID = '#rec82955572';
    setTimeout(function() {
$(sliderID+' .owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    item:1,
    nav:false,
    responsive:{
//Кол-во слайдо на разном разрешении        
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

  }, 500);
//Кнопки управления слайдером
  $(sliderID+' .prev').click(function() {  $(sliderID+" .owl-prev")[0].click();   });
  $(sliderID+' .next').click(function() {  $(sliderID+" .owl-next")[0].click();   });
});
</script>
Main Center Owl

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<style>
/*Стили для слайдера*/
  .maincenterowl  .no-js .owl-carousel, .owl-carousel.owl-loaded {
    margin-bottom: 20px;
}
 .maincenterowl  .owl-carousel .item {
    transform: scale(.5) translateY(0px);
    opacity: .5;
    transition: transform 0.3s ease, opacity 0.3s ease;
} 

.maincenterowl .owl-carousel .center .item {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
    
</style>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
    background: #e8f7ff;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>

<!--Основа слайдера  -->
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://clck.ru/F3mQi" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mQw" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mR8" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mRJ" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mRQ" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mRe" alt=""></div>
</div>
<!--Кнопки слайдера  -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>

<script>
    $(document).ready(function() {
//ПРописываем ID нашего блока        
    $('#rec83078949').addClass('maincenterowl');
      setTimeout(function() { 
  var owl = $('.maincenterowl .owl-carousel');
owl.owlCarousel({
    items:3,
    loop:true,
    margin:30,
    center: true,
    nav:true,
    //Адаптация слайдера
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        }
    }
});
//Работа кнопок слайдера 
  $('.maincenterowl .next').click(function() { owl.trigger('next.owl.carousel' , [300]); });
  $('.maincenterowl .prev').click(function() { owl.trigger('prev.owl.carousel', [300]);  });
  }, 500);
});
</script>
Center Owl

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<!--Основа слайдера  -->
<div class="owl-carousel owl-theme loop">
 <div class="item"><img src="https://clck.ru/F4Jn7" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4Jna" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4Jnn" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4Jo6" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4JoN" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4Jom" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4JpQ" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4JpZ" alt=""></div>
</div>
<!--Кнопки слайдера  -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
    background: #e8f7ff;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>

<script>
    $(document).ready(function() {
//Прописываем ID нашего блока        
 var centowl = '#rec83246621';
    setTimeout(function() { 
$('.loop').owlCarousel({
    center: true,
    items:2,
    loop:true,
    nav:true,
    margin:10,
//Адаптация слайдера    
    responsive:{
         0:{
            items:1
        },
        600:{
            items:4
        }
        
    }
});
}, 500);
//Работа кнопок слайдера
 $(centowl+' .prev').click(function() {
    $(centowl+" .owl-prev")[0].click();   
  });
  $(centowl+' .next').click(function() {
    $(centowl+" .owl-next")[0].click();   
  });
});
    
</script>
Autoplay Owl

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<!--Основа слайдера  -->
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://clck.ru/F3mQi" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mQw" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mR8" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mRJ" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mRQ" alt=""></div>
 <div class="item"><img src="https://clck.ru/F3mRe" alt=""></div>
</div>
<!--Кнопки слайдера  -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
    background: #e8f7ff;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>


<script>
    
    $(document).ready(function() {
//ПРописываем ID нашего блока        
    $('#rec83391760').addClass('autosliding');
     setTimeout(function() { 
var owlauto = $('.autosliding .owl-carousel');
owlauto.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
        responsive:{
//Кол-во слайдо на разном разрешении        
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
});

//Работа кнопок слайдера 
  $('.autosliding .next').click(function() {
    owlauto.trigger('next.owl.carousel' , [300]);
  });
  $('.autosliding .prev').click(function() {
    owlauto.trigger('prev.owl.carousel', [300]);
  });
}, 500);


});
    
</script>
Scroll Owl

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<!--Основа слайдера  -->
<div class="owl-carousel owl-theme">
 <div class="item"><img src="https://clck.ru/F4NU8" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NUh" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NUo" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NUy" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NVB" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NVT" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NVb" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NVj" alt=""></div>
 <div class="item"><img src="https://clck.ru/F4NW2" alt=""></div>
</div>
<!--Кнопки слайдера  -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
    background: #e8f7ff;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>

<script>
    
    $(document).ready(function() {
//ПРописываем ID нашего блока        
    $('#rec83400800').addClass('scrollowl');
         setTimeout(function() { 
var owl = $('.scrollowl .owl-carousel');
owl.owlCarousel({
    loop:true,
    nav:true,
    margin:10,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },            
        960:{
            items:5
        },
        1200:{
            items:6
        }
    }
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

//Работа кнопок слайдера
 $('.scrollowl .prev').click(function() {
    $(".scrollowl .owl-prev")[0].click();   
  });
  $('.scrollowl .next').click(function() {
    $(".scrollowl .owl-next")[0].click();   
  });

}, 500);
});
    
</script>
Video Owl

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
    background: #e8f7ff;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>

<style>
/*Стили для слайдера*/
   .videoowl .owl-carousel .video {
    height: 200px;
}   
   .videoowl .owl-carousel .owl-video-tn {
    background-size: auto;
}

</style>
<!--Основа слайдера  -->
<div class="owl-carousel owl-theme">
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/T7K0pZ9tGi4?enablejsapi=1&?rel=0&amp;fmt=18&amp;html5=1&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/FXqp9WiFWzc?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/W9P_qUnMaFg?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/_ghb2zYCbbM?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/dSYu8FLVr_Y?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/pk_fUhOo0nc?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/dlO8aANekSM?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <div class="item video" data-merge="1"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/6aP7bun6KPw?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  
</div>
<!--Кнопки слайдера  -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>

<script>
    
    $(document).ready(function() {
//Добавляем класс к нашему блоку        
    $('#rec83280278').addClass('videoowl');
       setTimeout(function() { 
    $('.owl-carousel').owlCarousel({
        items:1,
        merge:false,
        loop:true,
        margin:10,
        video:true,
        center:true,
    //Адаптация слайдера    
        responsive:{
              0:{
            items:1
            },
            
            960:{
                items:3
            }
        }
    });
//Кнопки для слайдера работа
 $('.videoowl .prev').click(function() {
    $(".videoowl .owl-prev")[0].click();   
  });
  $('.videoowl .next').click(function() {
    $(".videoowl .owl-next")[0].click();   
  });
}, 500);
});

     //При пролистывании или закрытии галереи останавливаем видео
    $(document).on('click', '.videoowl .owl-carousel', function() {
      $(".videoowl iframe").each(function() { $(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*') });
    
});

</script>
Video II Owl Touch

<!--Библиотеки для слайдера -->
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.mousewheel.min.js"></script>

<style>
/*Стили для слайдера*/
 .videoowlII  .owl-carousel .item-video {
    height: 270px;
}   
   .videoowlII .owl-carousel .owl-video-tn {
    background-size: auto;
}

</style>

<style>
/*Стили кнопок слайдеров*/
.prev , .next {
    cursor:pointer;
    padding: 4px;
}
img.sliderarrowowl {
    width: 35px;
    margin-top: 15px;
    border-radius: 17px;
    transition: all 0.2s ease-in-out;
}
img.sliderarrowowl:hover {
    transform: scale(1.2);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #c399ff;
}
.owl-theme .owl-dots .owl-dot span {
    background: #e8f7ff;
}
img.sliderarrowowl:active {
    transform: scale(0.9);
}
.owl-prev , .owl-next{
    display: none !important
}
</style>

<!--Основа слайдера  -->
<div class="owl-carousel owl-theme">
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=T7K0pZ9tGi4?enablejsapi=1&?rel=0"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=FXqp9WiFWzc?enablejsapi=1&?rel=0"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=W9P_qUnMaFg?enablejsapi=1&?rel=0"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=_ghb2zYCbbM?enablejsapi=1&?rel=0"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=dSYu8FLVr_Y?enablejsapi=1&?rel=0"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=pk_fUhOo0nc?enablejsapi=1&?rel=0"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=dlO8aANekSM?enablejsapi=1&?rel=0"></a></div>
    <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=6aP7bun6KPw?enablejsapi=1&?rel=0"></a></div>
</div>
<!--Кнопки слайдера  -->
<span class="prev"><img src="https://clck.ru/F3kr9" imgfield="img" class="sliderarrowowl"></span>
<span class="next"><img src="https://clck.ru/F3kqp" imgfield="img" class="sliderarrowowl"></span>


<script>
    
    $(document).ready(function() {
//Прописываем класс нашему блоку        
    $('#rec83288869').addClass('videoowlII');
      setTimeout(function() { 
    $('.owl-carousel').owlCarousel({
        items:1,
        merge:false,
        loop:true,
        margin:10,
        video:true,
        center:true,
    //Адаптация    
        responsive:{
              0:{
            items:1
            },
            
            960:{
                items:3
            }
        }
    });

//Управление кнопками для слайдера
 $('.videoowlII .prev').click(function() {
    $(".videoowlII .owl-prev")[0].click();   
  });
  $('.videoowlII .next').click(function() {
    $(".videoowlII .owl-next")[0].click();   
  });
}, 500);
});


//При пролистывании или закрытии галереи останавливаем видео
 $(document).on('click', '.videoowlII .owl-carousel', function() {
 $('.videoowlII .center iframe:not(:first)').remove();  
 var centerlink = $('.videoowlII .center iframe').attr("src");
 centerlink = centerlink + '&enablejsapi=1';
 $('.videoowlII .center iframe').attr("src" , centerlink);
 $("iframe").each(function() { $(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*') });
    
});


    
</script>

Made on
Tilda