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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

<style>
  .nav_html {display:inline-block}
  .hideparent{display:none}
  .next_slide, .prev_slide {cursor:pointer}

  .nav_html .swiper { width: inherit; }
  .nav_html .swiper-wrapper { padding: 35px 0; }

  .nav_html .swiper-slide .t524__itemwrapper {
    transform: scale(0.8);
    filter: opacity(0.4);
    transition: all 0.3s ease-in-out;
  }
  .nav_html .swiper-slide-active .t524__itemwrapper {
    transform: scale(1);
    filter: opacity(1);
  }
  .nav_html .swiper-slide:not(.swiper-slide-active):hover .t524__itemwrapper { filter: opacity(1); }
  .nav_html .swiper-slide { cursor: pointer; }


  .t524__col {margin:0; padding:0 !important;}
  .t524__imgwrapper { margin-bottom: 8px }
  .t524__wrappercenter { padding:0 }
  .t524__persname { font-size:14px; font-weight:200; }
  .t524__col-mobstyle { width:100%; }

  .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 src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
	const zeroNavBar = document.querySelector('.nav_html')?.closest('.t-rec');
	const tm101 = document.querySelector('.t524').closest('.r');
	if(!zeroNavBar || !tm101) return;
	tm101.classList.add('hideparent');
	const navHtml = zeroNavBar.querySelector('.nav_html');
	navHtml.innerHTML = `
    <div class="swiper">
      <div class="swiper-wrapper"></div>
    </div>
  `;
	const swiperWrapper = navHtml.querySelector('.swiper-wrapper');
	const tcols = tm101.querySelectorAll('.t-col');
	tcols.forEach(col => {
		const bg = col.querySelector('.t524__bgimg');
		if(bg) {
			const url = bg.getAttribute('data-original');
			if(url) bg.style.backgroundImage = 'url(' + url + ')';
		}
		const slide = document.createElement('div');
		slide.className = 'swiper-slide';
		slide.appendChild(col);
		swiperWrapper.appendChild(slide);
	});
	document.querySelectorAll('.nav_content').forEach(el => {
		const rec = el.closest('.t-rec');
		if(rec) rec.classList.add('content_block');
	});
	const contentBlocks = Array.from(document.querySelectorAll('.content_block'));
	contentBlocks.forEach((blk, i) => {
		if(i === 0) blk.classList.add('nav_cont_active');
		else blk.classList.add('hide_nav_cont');
		//blk.querySelectorAll('.t-animate').forEach(a => a.classList.add('animcontent'));
	});
	// Swiper
	const swiper = new Swiper(navHtml.querySelector('.swiper'), {
		loop: true,
		centeredSlides: true,
		speed: 1600,
		spaceBetween: 30,
		slidesPerView: 3,
		breakpoints: {
			0: {
				slidesPerView: 1
			},
			640: {
				slidesPerView: 3
			},
			960: {
				slidesPerView: 5
			}
		},
		slideToClickedSlide: true,
		watchSlidesProgress: true
			// autoplay: { delay: 2000, disableOnInteraction: false },
	});
	let lastSyncedIndex = -1;
	let pendingSwitchTimer = null;
	let syncDebounceTimer = null;

	function changeContentBlk(num) {
		if(pendingSwitchTimer) clearTimeout(pendingSwitchTimer);
		pendingSwitchTimer = setTimeout(() => {
			const active = document.querySelector('.nav_cont_active');
			if(active) {
			    const animatedElements = document.querySelectorAll('.content_block .t-animate_started');
			    animatedElements.forEach(element => {
			        element.classList.remove('t-animate_started');
			    });
			    setTimeout(function() {
			        active.classList.add('hide_nav_cont');  
			        
			        contentBlocks.forEach(b => b.classList.remove('nav_cont_active'));
        			const target = contentBlocks[num % contentBlocks.length];
        			if(!target) return;
        			target.classList.add('nav_cont_active');
        			target.classList.remove('hide_nav_cont');
        			
        			
        			setTimeout(function() {
        			     const animatedElementsActive = target.querySelectorAll('.t-animate');
        			     animatedElementsActive.forEach(element => {
        			        element.classList.add('t-animate_started');
        			     });
        			}, 500);
			        
			        
			        
			        
			    }, 500);
				
			};
			
			
			
		}, 900);
	}

	function syncContentToActiveSlide(force = false) {
		const idx = swiper.realIndex;
		if(!force && idx === lastSyncedIndex) return;
		lastSyncedIndex = idx;
		changeContentBlk(idx);
	};

	function scheduleSync(force = false) {
		if(syncDebounceTimer) clearTimeout(syncDebounceTimer);
		syncDebounceTimer = setTimeout(() => syncContentToActiveSlide(force), 120);
	};
	swiper.on('realIndexChange', () => scheduleSync(false));
	swiper.on('transitionEnd', () => scheduleSync(false));
	const nextBtn = document.querySelector('.next_slide');
	const prevBtn = document.querySelector('.prev_slide');
	if(nextBtn) nextBtn.addEventListener('click', () => swiper.slideNext());
	if(prevBtn) prevBtn.addEventListener('click', () => swiper.slidePrev());
	let resizeTimer;
	window.addEventListener('resize', () => {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(() => swiper.update(), 300);
	});
	setTimeout(() => syncContentToActiveSlide(true), 500);
	setTimeout(function() {
		forceStartAllAnimations();
	}, 1500);

	function forceStartAllAnimations() {
		if(typeof t_animate__setStartAnimationClass !== 'function' || typeof t_animate__animateNumbers !== 'function') {
			return;
		};
		const animatedElements = document.querySelectorAll('.content_block .t396 .t-animate');
		animatedElements.forEach(element => {
			try {
				element.classList.remove('t-animate_wait', 't-animate_no-hover');
				if(element.classList.contains('t-btn')) {
					element.classList.remove('t-animate_no-hover');
				};
				if(element.getAttribute('data-animate-chain') === 'yes') {
					element.style.transitionDelay = '0s';
				};
				t_animate__setStartAnimationClass(element, true);
				if(element.getAttribute('data-animate-style') === 'animatednumber') {
					t_animate__animateNumbers(element);
				};
			} catch(e) {
			
			};
		});
	};
});
</script>