Слайдер с активной карточкой

<!--Owl carousel 2 (добавить в шапку или начало страницы)-->

<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'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>

<!--Слайдер (добавить в Zero-блок в качестве HTML-блока)-->

<div id="owl-demo-slider" class="owl-carousel owl-theme">
    <div class="item_1_slider" ></div>
    <div class="item_2_slider" ></div>
    <div class="item_3_slider" ></div>
    <div class="item_4_slider" ></div>
    <div class="item_5_slider" ></div>
    <div class="item_6_slider" ></div>
</div>

<style>
/*Настройки слайдера*/
    :root {
        --BackgroundImgColor: #828074; /*Цвет не активных слайдов*/
        --SlideHeight: 550px; /*Высота слайдов*/
    }


/*/////////////////////////////////////*/


    #owl-demo-slider .owl-stage-outer {
        width: 100%;
        height: var(--SlideHeight);
    }

    #owl-demo-slider .owl-item,
    #owl-demo-slider .t396__artboard {
        height: var(--SlideHeight);
        min-height: var(--SlideHeight);
    }
    #owl-demo-slider {
        height:var(--SlideHeight);
    }
    .owl-carousel {
        cursor: grab;
    }
    .owl-carousel:active {
        cursor: grabbing;
    }
    .img {
        overflow: hidden !important;
    }

    .owl-carousel .text .tn-atom {
        opacity: 0 !important;
        transition-duration: 0.5s;
       transform: translateY(0px);
    }
    .owl-carousel:active .text .tn-atom {
        transition-duration: 0.5s;
        transform: translateY(-50px);
        opacity:0 !important;
    }
    .img .tn-atom {
        transition-duration: 0.5s;
        transform: scale(0.7);

    }
    .img .tn-atom:before {
        overflow: hidden !important;
        content:"";
        width: 100%;
        height: 100%;
        background: var(--BackgroundImgColor);
        mix-blend-mode: color;
        position: absolute;
        top: 0;
        transition-duration: 0.5s;
    }
    .center .img .tn-atom {
        transition-duration: 0.5s;
        filter: grayscale(0);
         transform: scale(1);
    }
     .center .img .tn-atom:before {
        content:"";
        width: 100%;
        height: 100%;
        background: var(--BackgroundImgColor);
        mix-blend-mode: color;
        position: absolute;
        top: 0;
        opacity:0;
    }
    .owl-carousel:active .img .tn-atom:before {
        transition-duration: 0.5s;
        content:"";
        width: 100%;
        height: 100%;
        background: var(--BackgroundImgColor);
        mix-blend-mode: color;
        position: absolute;
        top: 0;
        opacity:1;
        /*border-radius: 50%;*/

    }
     .owl-carousel .img {
         transform: scale(0.85);
        overflow: hidden !important;
        transition-duration: 0.5s;
     }
     .owl-carousel .img .tn-atom {
         transform: scale(1);
        overflow: hidden !important;
        transition-duration: 0.5s;
     }
     
     .owl-carousel .center .img {
         transform: scale(1.05);
        overflow: hidden !important;
        transition-duration: 0.5s;
     }
     
    .owl-carousel .center .img .tn-atom {
         transform: scale(1.15);
        overflow: hidden !important;
        transition-duration: 0.5s;
     }
     
    .owl-carousel:active  .img {
        transform: scale(0.7) !important;
        overflow: hidden !important;
        transition-duration: 0.5s;
        opacity: 0.6;
    }
    
    .owl-carousel:active  .img .tn-atom {
        overflow: hidden !important;
        transition-duration: 0.5s;
        transform: scale(1.3) !important;
        /*border-radius: 50%;*/
    }
    
    .center .text .tn-atom {
        transition-duration: 0.5s;
        opacity: 1 !important;
        
    }
    
.owl-dot.active {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border-width: 0px;
    background: var(--BackgroundImgColor);
    margin: 3px;
    opacity: 100%;
}
.owl-dot {
    pointer-events: none;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border-width: 0px;
    background: var(--BackgroundImgColor);
    margin: 3px;
    opacity: 20%;
}
.owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.slider-dots .owl-dots:nth-child(2) {
    display: none;
}

</style>

<!--Помещаем слайды в слайдер-->
<script>
    $('.uc-slide_1').appendTo(".item_1_slider");
    $('.uc-slide_2').appendTo(".item_2_slider");
    $('.uc-slide_3').appendTo(".item_3_slider");
    $('.uc-slide_4').appendTo(".item_4_slider");
    $('.uc-slide_5').appendTo(".item_5_slider");
    $('.uc-slide_6').appendTo(".item_6_slider");

    window.onload = function () { 
$('.owl-dots').appendTo(".slider-dots .tn-atom");
    }
</script>

<!--////////////////////////////-->




<!--Owl carousel Настройки галереи (поместить под карусель)-->

<script>
    $(document).ready(function(){
        var owl = $(".owl-carousel");
        $("#owl-demo-slider").owlCarousel({
            items:3,
            loop:true,
            autoplay:false,
            autoplayTimeout:3000,
            smartSpeed: 1000,
            autoplayHoverPause:false,
            autoHeight : true,
            center: true,
            responsive:{
        0:{
            items:1,
            nav: false,
            dots: true,
            autoplay: true,
            touchDrag: true,
            mouseDrag: true,
            center: true
        },
        600:{
            items:1,
            nav: false,
            dots: false,
            autoplay: false,
            touchDrag: true,
            mouseDrag: true,
            center: true
        },
        1000:{
            items:1,
            nav: false,
            dots: false,
            autoplay: false,
            touchDrag: true,
            mouseDrag: true,
            center: true
           
        },
        1400:{
            items:3,
            nav: false,
            dots: false,
            autoplay: false,
            touchDrag: true,
            mouseDrag: true,
            margin:100
        },
        1800:{
            items:3,
            nav: false,
            dots: false,
            autoplay: false,
            touchDrag: true,
            mouseDrag: true,
            margin: 360
        
        }
    }
    
    
        });

// $(".next").click(function(){owl.trigger('next.owl.carousel');})
// $(".prev").click(function(){owl.trigger('prev.owl.carousel');})
  
    });

</script>