Добавьте zero-блок, наполните контентом и создайте несколько кнопок с классом: tab_btn
Добавьте 2 иконки стрелок с классами left_tab и right_tab ( если хотите переключать стрелками )
Сделайте копии Zero-block и отредактируйте контент
Вставьте код на страницу
в блок Другое - Т123
И впишите ID всех ваших блоков в код на страницу в "Т123 ['#rec346064270','#rec346073573']
<!-- Создаем блок с табами. Переключение нескольких zero-block через кнопки -->
<!-- https://youx.agency/sozdaem-blok-s-tabami-pereklyuchenie-neskolkih-zero-block-cherez-knopki -->
<style>
.t-rec.posAnsld{
position : absolute;
width:100%;
top:0;
}
.outVis{opacity:0}
.outInd{z-index:-1}
.maintabsection , .outInd { position: relative}
.maintabsection { overflow: hidden}
.tab_btn , .right_tab, .left_tab {
cursor:pointer;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.stoptab{pointer-events:none}
.timestep{ transition:all 300ms ease-in-out}
</style>
<script>
$( document ).ready(function() {
let timestep = 300;
//ID Zero
var sbZero = [
['#rec896331276','#rec943331277','#rec44431278']
];
//Создаём общую секция для блоков
$.each(sbZero, function(index) {
let groupID='';
$.each(sbZero[index], function(key) {groupID += sbZero[index][key]+',' });
$(groupID.slice(0, -1)).wrapAll('<div class="maintabsection"></div>');
});
//Добавляем классы к нашим Zero
$('.maintabsection').each(function() {
$(this).find('.t-rec:not(:first)').addClass('outVis outInd posAnsld');
});
function changeTab(em,el){
em.height( em.find('.t-rec:eq('+el+')').height() );
em.find('.t-rec:eq('+el+')').removeClass('outVis');
em.find('.t-rec:eq('+el+') .tab_btn:eq('+el+')').addClass('actbtnZ');
em.find('.t-rec').not(':eq('+el+')').addClass('outVis timestep');
$('.tab_btn, .right_tab , .left_tab').addClass('stoptab').css('cursor','default');
setTimeout(function(){
em.find('.t-rec:eq('+el+')').removeClass('outInd');
em.find('.t-rec').not(':eq('+el+')').addClass('outInd').removeClass('timestep');
$('.tab_btn, .right_tab , .left_tab').removeClass('stoptab').css('cursor','pointer');
}, timestep);
};
//При клике на кнопку
$('.tab_btn').click(function(){
let mSect = $(this).closest('.maintabsection');
let posBtn = $(this).closest('.t-rec').find('.tab_btn').index(this);
mSect.find('.tab_btn').removeClass('actbtnZ');
changeTab(mSect,posBtn);
});
//При клике на кнопку вправо
$('.right_tab').click(function(){
let mSect = $(this).closest('.maintabsection');mSect.addClass('acive_tab');
let summBlk = mSect.find('.t-rec').length-1;
let posArrow = $(this).closest('.t-rec').index('.acive_tab .t-rec');
mSect.removeClass('acive_tab');
if(posArrow<summBlk){changeTab(mSect, posArrow+1)
}else{ changeTab(mSect, 0)};
});
//При клике на кнопку влево
$('.left_tab').click(function(){
let mSect = $(this).closest('.maintabsection');mSect.addClass('acive_tab');
let summBlk = mSect.find('.t-rec').length-1;
let posArrow = $(this).closest('.t-rec').index('.acive_tab .t-rec');
mSect.removeClass('acive_tab');
if(posArrow>0){changeTab(mSect, posArrow-1)
}else{ changeTab(mSect, summBlk)};
});
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ $('.actbtnZ').click()}, 2000);});
});
</script>