Как сделать слайдер с миниатюрами в Tilda

Как сделать слайдер с миниатюрами в Tilda

1
Создали блок CL34N
2
Добавили управление - Стрелки и точки
3
Добавили код в блок Другое - Т123
В коде заменили ID блока
let cl34id = '#rec238474578';
Библиотека для примера

<style>
.t801 .t-slds__bullet_body {
    display: none;
}
.t801 .t-slds__bullet_wrapper {
    margin-top: 45px;
    box-shadow: inset 0px -1px 0px 0 #fcb42f;
}
.t801 .t-slds__bullet {
    width: 60px;
    height: 60px;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.5;
    transform: scale(0.8);
    filter: grayscale(1);
    transition: all 0.3s ease-in-out;
}
.t-slds__bullet.t-slds__bullet_active {
    opacity: 1;
    transform: scale(1);
    filter: none;
}
@media screen and (max-width:1200px){
.t801 .t-slds__bullet {
    width: 40px;
    height: 40px;
}
}
@media screen and (max-width:580px){
.t801 .t-slds__bullet {
    width: 30px;
    height: 30px;
}
}
</style>

<script>
$( document ).ready(function() {  
let cl34id = '#rec166025100';
    if (document.querySelector('.t801__imgwrapper .t-slds__bgimg')){
         $(cl34id+' .t-slds__bgimg').each(function(index) {
          let urlbg = $(this).attr('data-original');
          $(this).closest('.t-slds').find('.t-slds__bullet[data-slide-bullet-for="'+index+'"]').css('background-image',  'url('+urlbg+')');
         });
    }else{ 
          $(cl34id+' .t-slds__img').each(function(index) {
          let urlbg = $(this).attr('data-original');
          $(this).closest('.t-slds').find('.t-slds__bullet[data-slide-bullet-for="'+index+'"]').css('background-image',  'url('+urlbg+')');
         });
    };
});    
</script>
Made on
Tilda