Как создать таб переключатель из карусели в 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
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём таб переключатель в виде карусели.
Переключаем ZeroBlock по клику.
Длительность видео: 26 мин
Фрагмент видео
Библиотека для примера

<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>
Made on
Tilda