Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

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

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

1
Создали PR201N и задали ему класс uc-slide-control
Кол-во блоков в ряду -6
Стиль 2
Ширина - 12 колонок
Ширина изображения 120рх
Управление - стрелки и точки
2
Добавили в него 12 картинок и поставили на каждую ссылку с индексом
#cl34_1 , #cl34_2 , #cl34_3 , #cl34_4 ...
3
Создали блок CL34N на 12 карточек и задали ему класс uc-slide-content
Управление - стрелки и точки
4
Вставили код на страницу в блок Т123
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        document.querySelector('.uc-slide-control div[data-slide-index="1"] .t738__img').classList.add('active_nav');
        
        const cl34 = document.querySelectorAll('a[href^="#cl34_"]');
        cl34.forEach(function (el, index) {
            el.addEventListener('click',function(e) {
                e.preventDefault();
                const img = el.querySelector('img');
                if(!img.classList.contains("active_nav") ){
                    let hrefText = el.getAttribute('href');
                    hrefText = +hrefText.split('_')[1];
                    document.querySelector('.uc-slide-content li[data-slide-bullet-for="'+hrefText+'"]').click();
                };
            });    
        });
        
        const target = document.querySelector('.uc-slide-content .t-slds__items-wrapper');
        
        const observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            var newVal = $(mutation.target).prop(mutation.attributeName);
            if (mutation.attributeName === "class") {
            setTimeout(function(){
                const bulletNumber = document.querySelector('.uc-slide-content .t-slds__bullet_active').getAttribute('data-slide-bullet-for');
                const linkElem = document.querySelectorAll('a[href="#cl34_'+bulletNumber+'"]');

                document.querySelectorAll('.uc-slide-control .t738__img').forEach(el=>el.classList.remove('active_nav'));
                linkElem.forEach(el=>el.querySelector('img').classList.add('active_nav'));
                
                if( document.querySelector('.uc-slide-control div.t-slds__item_active').querySelector('a[href="#cl34_'+bulletNumber+'"]')==null ){
                    
                    const slidesItem = document.querySelectorAll('.uc-slide-control .t-slds__item');
                    
                    for(let i=1; i<slidesItem.length-1; i++){
                        if(slidesItem[i].querySelector('a[href="#cl34_'+bulletNumber+'"]')!=null){
                            const activeLine = +slidesItem[i].getAttribute('data-slide-index');
                            if(activeLine>0) document.querySelector('.uc-slide-control li[data-slide-bullet-for="'+activeLine+'"]').click();  
                        };
                    };

                };

            }, 100);
    	    };  
        });
        });
        observer.observe( target , {  attributes: true});
 
 
    })();    
});    
</script>


<style>
.uc-slide-control  .t-slds__bullet_wrapper , 
.uc-slide-control  .t-slds__bullet_wrapper { display: none}

.uc-slide-control .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);
}

.uc-slide-content ul.t-slds__bullet_wrapper {
    display: none;
}

.uc-slide-control a.t-card__link {
    border-radius: 50%;
}


@media screen and (min-width:1400px){

.uc-slide-control .t-slds__container {
    z-index: 50;
}

.uc-slide-control .t-slds__arrow_wrapper,
.uc-slide-content .t-slds__arrow_wrapper{
    width: 100%;
}

.uc-slide-control .t-slds__arrow-left,
.uc-slide-content .t-slds__arrow-left
{
    left: calc(50% - 680px);
}

.uc-slide-control .t-slds__arrow-right,
.uc-slide-content .t-slds__arrow-right{
    right: calc(50% - 680px);
}

}

@media screen and (max-width: 440px){
.uc-slide-control .t738__item_6-in-row { width: 33.333%}
}
@media screen and (max-width: 1200px){
.active_nav{box-shadow: 0 0 7px 0 #000}
}

</style>
Made on
Tilda