<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
let zeroNavBar = $('.nav_html').closest('.t-rec');
let tm101 = $('div[data-record-type="524"]');
tm101.addClass('hideparent');
zeroNavBar.find('.nav_html').html('<div class="owl-carousel"></div>');
tm101.find('.t-col').each(function() {
let bgUrl = $(this).find('.t524__bgimg').attr('data-original');
$(this).find('.t524__bgimg').css('background-image', 'url('+bgUrl+')');
$(this).appendTo(zeroNavBar.find('.owl-carousel'));
});
$('.nav_content').each(function(index ) { $(this).closest('.t-rec').addClass('content_block')});
$('.content_block').not(':first').addClass('hide_nav_cont');
$('.content_block:first').addClass('nav_cont_active');
$('.content_block .t-animate').addClass('animcontent');
setTimeout(function() {
let owl = zeroNavBar.find('.owl-carousel');
owl.owlCarousel({
items:3,
loop:true,
stagePadding:0,
autoplay:false,
autoplayTimeout:2000,
autoplayHoverPause:false,
smartSpeed:1600,
margin:30,
center: true,
nav:false,
info:true,
responsive:{
0: { items:1},
640: { items:3},
960: { items:5}
}
});
setTimeout(function() {
$('.content_block .animcontent').each(function(){
if ( !$(this).hasClass('t-animate') ) {
$(this).addClass('t-animate t-animate_started');
let delay = $(this).attr('data-animate-delay');
let duration = $(this).attr('data-animate-duration');
if (typeof delay === "undefined") {}else{
$(this).css('transition-delay', delay+'s');
};
if (typeof duration === "undefined") {}else{
$(this).css('transition-duration', duration+'s');
};
};
});
}, 2000);
//Переключение блока
function changeContentBlk(num){
$('.content_block .tn-elem.t-animate').removeClass('t-animate_started t-animate_wait');
setTimeout(function() {
$('.nav_cont_active').addClass('hide_nav_cont'); //скрыть
$('.content_block').removeClass('nav_cont_active');
$('.content_block').eq(num).addClass('nav_cont_active').removeClass('hide_nav_cont'); //показать
$('.nav_cont_active .tn-elem.t-animate').addClass('t-animate_started');
}, 900);
};
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ owl.trigger('refresh.owl.carousel')}, 1000);});
//Поиск центрального слайда
function indexOfSlide(){
setTimeout(function() {
let carousel = $('.owl-carousel').data('owl.carousel');
let indexItem = carousel.relative($('.center').index());
changeContentBlk(indexItem);
}, 500);
};
//При слайдинге
owl.on('change.owl.carousel', function(event) { indexOfSlide()});
//Переключение по клику на стрелки
$('.next_slide').click(function() { owl.trigger('next.owl.carousel')});
$('.prev_slide').click(function() { owl.trigger('prev.owl.carousel')});
//Переключение по клику на элемент
$('.owl-carousel').on('click', '.owl-item', function(e) {
let carousel = $('.owl-carousel').data('owl.carousel');
let indexItem = carousel.relative($(this).index());
carousel.to(indexItem , 300);
});
}, 100);
});
</script>
<style>
.hideparent{display:none}
.nav_html {display: inline-block}
.next_slide, .prev_slide {cursor:pointer}
.owl-item.center .t524__itemwrapper {
transform: scale(1);
filter: opacity(1);
}
.owl-item .t524__itemwrapper {
transform: scale(0.8);
filter: opacity(0.4);
}
.owl-item .t524__itemwrapper { transition: all 0.3s ease-in-out}
.owl-stage {padding: 35px 0}
.t524__col {margin: 0}
.t524__persname {
font-size: 14px;
font-weight: 200;
}
.t524__col {padding: 0 !important}
@media screen and (max-width: 960px){
.t524__col-mobstyle {width: 100%}
}
.t524__imgwrapper { margin-bottom: 8px}
.t524__wrappercenter {padding: 0}
.owl-item:not(.center):hover .t524__itemwrapper {filter: opacity(1)}
.owl-item { cursor: pointer}
.hide_nav_cont{
opacity: 0!important;
height: 0!important;
max-height: 0!important;
min-height: 0!important;
pointer-events: none!important;
overflow: hidden!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
</style>