Как создать зависимость между блоками PR201N и CL34N в Tilda

Как создать зависимость между блоками PR201N и CL34N в Tilda

1
Создали PR201N
Кол-во блоков в ряду -6
Стиль 2
Ширина - 12 колонок
Ширина изображения 120рх
Управление - стрелки и точки
2
Добавили в него 12 картинок и поставили на каждую ссылку с индексом
#cl34_1 , #cl34_2 , #cl34_3 , #cl34_4 ...
3
Создали блок CL34N на 12 карточек
Управление - стрелки и точки
4
Вставили код на страницу в блок Т123
Библиотека для примера
<style>
.t728__textwrapper div {
    display: flex;
    flex-direction: column;
}
.t728__title { order: -1}   
.t801 .t-slds__bullet_wrapper , .t738 .t-slds__bullet_wrapper { display: none}
.t738__img {
    border-radius: 50%;
    cursor: pointer;
    transition:all 0.3s ease-in-out;
}
.active_nav{
    box-shadow: 0 0 15px 0 #000;
    filter: grayscale(0);
}
@media screen and (max-width: 440px){
.t738__item_6-in-row { width: 33.333%}
}
@media screen and (max-width: 1200px){
.active_nav{box-shadow: 0 0 7px 0 #000}
}
</style>

<script>
$(document).ready(function(){
$('.t738 div[data-slide-index="1"] .t738__img:first').addClass('active_nav');
$('a[href^="#cl34_"]').click(function(e){e.preventDefault();
if (!$(this).find('img').hasClass('active_nav') ){
     let hreftext = $(this).attr('href');
     hreftext = +hreftext.split('_')[1];
     $('.t801 div[data-slide-bullet-for="'+hreftext+'"]').click();
};
});
var target = document.querySelector('.t801 .t-slds__items-wrapper');
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "class") {
        setTimeout(function(){
            let bulletNumber = $('.t801 .t-slds__bullet_active').attr('data-slide-bullet-for');
            let linkElem = $('a[href="#cl34_'+bulletNumber+'"]');
            $('.t738__img').removeClass('active_nav');
            linkElem.find('img').addClass('active_nav');
            if( !$('.t738 div.t-slds__item_active').find('a[href="#cl34_'+bulletNumber+'"]').length){
                $('.t738 .t-slds__item').each(function() {
                    if( $(this).find('a[href="#cl34_'+bulletNumber+'"]').length){
                        let activeLine = +$(this).attr('data-slide-index');
                        $('.t738 div[data-slide-bullet-for="'+activeLine+'"]').click();
                    };
                });
            };
        }, 100);
	    };  
});
});
observer.observe( target , {  attributes: true});
});
</script>
Made on
Tilda