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

Создадим слайдер с миниатюрами из блоков CL34N и PR201N
Порядок выполнения данного примера на 12 позиций
1. Создаём слайдер Колонки►CL34N
2. Добавляем в него 12 карточек - Настройки: Стрелки и точки
3. Создаём слайдер Партнёры►PR201N
4. Добавляем в него 12 карточек и прописываем ссылки #120-#131
5. Добавляем на страницу скрипт.

Скрипт вставляется в блок ДРУГОЕ►Т123
<style>
/*Скрываем стрелки и точки у болшого слайдера*/
    .t801 .t-slds__arrow_container ,
    .t-slds__bullet_wrapper{
    display:none;
    }
/*Создаём класс с границами для малого фото*/  
.newselect , .t738__linkwrapper:hover{
    border: 1px solid #0094DA !important;
}    
/*Задаём прозрачные грацицы у миниатюр*/ 
.t738__linkwrapper {
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}   
   
/***Изменяем положение стрелок***/
/********************************/
.t738 .t-slds__arrow_wrapper {
    position: relative !important;
}
.t738 .t-slds__arrow_wrapper-left , .t-slds__arrow_wrapper-right {
   
    width: 50% !important;
    float: left;
}
.t738 .t-slds__arrow-left {
  
    left: 90% !important;
}
.t738 .t-slds__arrow-right {
    right: 90% !important;
}
.t738 .t-slds__arrow_wrapper {
    width: 5%;
    height: 50px !important;
}

@media screen and (max-width: 960px){
.t738 .t-slds__arrow-left {
   left: 82% !important;
}
.t738 .t-slds__arrow-right {
    right: 82% !important;
}
}
/***Изменяем положение стрелок***/
/********************************/
   
</style>

<script>
 
 $(document).ready(function(){
//Добавляем границы к первой миниатюре при старте     
  $('[href="#120"]').addClass("newselect");   
//При клике на миниатюру удалеям границы у всех и добавляем границы к текущей     
  $('.t738__linkwrapper').click(function(){
      $(".t738__linkwrapper").removeClass("newselect");
      $(this).addClass("newselect");
      
  });   
     
    
 //При нажатии на определённую миниатюру активируем соответствующий слайд     
 $('[href="#120"]').click(function(){  $("[data-slide-bullet-for='1']")[0].click()});
 $('[href="#121"]').click(function(){  $("[data-slide-bullet-for='2']")[0].click()});
 $('[href="#122"]').click(function(){  $("[data-slide-bullet-for='3']")[0].click()});
 $('[href="#123"]').click(function(){  $("[data-slide-bullet-for='4']")[0].click()});
 $('[href="#124"]').click(function(){  $("[data-slide-bullet-for='5']")[0].click()});
 $('[href="#125"]').click(function(){  $("[data-slide-bullet-for='6']")[0].click()});
 $('[href="#126"]').click(function(){  $("[data-slide-bullet-for='7']")[0].click()}); 
 $('[href="#127"]').click(function(){  $("[data-slide-bullet-for='8']")[0].click()});  
 $('[href="#128"]').click(function(){  $("[data-slide-bullet-for='9']")[0].click()});  
 $('[href="#129"]').click(function(){  $("[data-slide-bullet-for='10']")[0].click()});
 $('[href="#130"]').click(function(){  $("[data-slide-bullet-for='11']")[0].click()});
 $('[href="#131"]').click(function(){  $("[data-slide-bullet-for='12']")[0].click()});
});
</script>
Made on
Tilda