Как создать таб переключатель из карусели в ZeroBlock и блока TM101 в Tilda
We aim to set the trends of modern living.
Etiam rhoncus. Tellus eget natoque condimentum rhoncus, sem quam semper libero, adipiscing sit amet sem, neque sed ipsumr irure preaemonitus.
EXPLORE
Studio Best Life
NEW PROJECT | JUNE 2021
Follow our projects
Project One
Project Two
Project Three
Project Four
Project FIve
Project Six
Project Seven
Project Eight
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.
Etiam sit amet orci eget eros faucibus. Duis leo. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Curabitur ullamcorper ultricies nisi. Nam eget dui. Donec vitae sapien ut libero. Sed fringilla mauris sit amet nibh. Nullam quis ante.

Как создать таб переключатель из карусели в ZeroBlock и блока TM101 в Tilda

1
Создали ZeroBlock для переключателей
2
Добавили в него 2 изображения стрелок и задали им классы prev_slide и next_slide
3
Добавили в него элемент HTML для слайдов, задали ему класс nav_html
Размеры элемента из данного примера поэкранно
1 - 580х190 , 2 - 580х190 , 3 - 512х212, 4 - 240х204 , 5 - 231х175
4
Создали блок TM101 - 4 ряда, ширина картинки 150px
Добавили 8 карточек и заполнили имя персоны
5
Создали 8 ZeroBlock для каждого слайда.
В каждом из этих блоков добавлен 1 заголовок с классом nav_content
Анимация - Basic Animation
6
Вставили код на страницу в блок Т123
Библиотека для примера
<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');

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}
    }
});
//Переключение блока
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>
Made on
Tilda