Задать вопрос
@tvoyamoon

Как сделать, чтобы код срабатывал на разные блоки?

Добрый вечер!
Что нужно заменить, чтобы код не срабатывал только на первый блок? (добавляла цифры к nav_html, nav_content, prev_slide и next_slide) - не срабатывает на оба блока по отдельности, все элементы перекидываются в самый первый блок (разные блоки с информацией, но взаимодействие идеи одно).

<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>

<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>

<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>
  • Вопрос задан
  • 83 просмотра
Подписаться 1 Средний 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы