Как сделать переключение галерей GL21 в Tilda
HUSQVARNA 455 Rancher
The 455 Rancher is an ideal saw for landowners and part-time users who require a high powered, heavy-duty and responsive workmate for all cutting conditions. It combines the best characteristics of its predecessor with new, facilitating technology and ergonomics.
Buy Now
HUSQVARNA 536Li XP
For professionally oriented users who want a lightweight, high performance, lithium-ion battery powered chainsaw. Perfect for carpenters, contractors, and treecare workers. Features excellent ergonomics and high chainspeed. Battery and charger not included.
Buy Now
HUSQVARNA 572 XP
Tested in the world's most rugged environments, the Husqvarna 572 XP® is ready for demanding work by forestry and tree care professionals. At just 14.5 lbs, the 572 XP® has a better power-to-weight ratio and 12% higher cutting capacity than previous Husqvarna models in the same class. Tested in the world's most rugged environments, the Husqvarna 572 XP® is ready for demanding work by forestry and tree care professionals. At just 14.5 lbs, the 572 XP® has a better power-to-weight ratio and 12% higher cutting capacity than previous Husqvarna models in the same class. Tested in the world's most rugged environments, the Husqvarna 572 XP® is ready for demanding work by forestry and tree care professionals. At just 14.5 lbs, the 572 XP® has a better power-to-weight ratio and 12% higher cutting capacity than previous Husqvarna models in the same class. Tested in the world's most rugged environments, the Husqvarna 572 XP® is ready for demanding work by forestry and tree care professionals. At just 14.5 lbs, the 572 XP® has a better power-to-weight ratio and 12% higher cutting capacity than previous Husqvarna models in the same class. Tested in the world's most rugged environments, the Husqvarna 572 XP® is ready for demanding work by forestry and tree care professionals. At just 14.5 lbs, the 572 XP® has a better power-to-weight ratio and 12% higher cutting capacity than previous Husqvarna models in the same class. Tested in the world's most rugged environments, the Husqvarna 572 XP® is ready for demanding work by forestry and tree care professionals. At just 14.5 lbs, the 572 XP® has a better power-to-weight ratio and 12% higher cutting capacity than previous Husqvarna models in the same class.
Buy Now

Как сделать переключение галерей GL21 в Tilda

1
Создали 3 блока GL21, оформили и наполнили контентом
2
Добавили код на страницу, в блок Другое - Т123

В коде прописали ID наших блоков GL21
["#rec132175448","#rec132262017","#rec132276358"];

Прописали ссылки на иконки стрелок
https://static.tildacdn.com/tild3362-3037-4732-b43...
https://static.tildacdn.com/tild3036-3539-4638-b16...

Библиотека для примера

<style>
.mainGl, .firstSldr{
    position: relative;
}
.firstSldr{
    z-index:20;
}
:focus {
    outline-style: none;
    outline-width: 0px !important;
    outline-color: none !important;
}
.otherSldr{
    position: absolute;
    width: 100%;
    top:0;
    z-index: 10;
    opacity: 0;
}
.inVismode{
    opacity: 0;
}
.UPMode{
    z-index: 25 !important;
    opacity: 1  !important;
}
.mysld{
    background: #fff;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -web-kit-user-select:none;
}
.mysld .t-container {
    position: relative;
    box-shadow: inset 0 0 5px 2px #e4e4e4;
    padding: 60px 0 100px;
}
.btncont{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
.leftbtn , .rightbtn {
    display: inline-block;
    cursor:pointer;
    width: 45px;
    height: 45px;
    border-radius: 20px;
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}
.leftbtn:hover , .rightbtn:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.leftbtn {
    background: url(https://static.tildacdn.com/tild3362-3037-4732-b434-653162623434/chevron-sign-left.svg) center center no-repeat;
    background-size: cover;
    margin-right: 10px;
}
.rightbtn {
    background: url(https://static.tildacdn.com/tild3036-3539-4638-b164-616561313061/chevron-sign-to-righ.svg) center center no-repeat;
    background-size: cover;
}
.t764__textwrapper {
    -web-kit-user-select: none;
    user-select: none;
}
</style>

<script>
    $( document ).ready(function() {
//Прописываем наши блоки
     var changegl21 = ["#rec165989367","#rec165989368","#rec165989369"];
     var index=0;  
//Добавляем классы и Скрываем все блоки контента
     for(var i = 0; i < changegl21.length; i++){
     $(changegl21[i]).addClass('mymainsld');
     $(changegl21[i]+' .t764').addClass('mysld'); };
     $(changegl21[0]+' .t764').addClass('firstSldr');
     $('.mymainsld').wrapAll('<div class="mainGl"></div>');
     for(var i = 1; i < changegl21.length; i++){
     $(changegl21[i]+' .t764').addClass('otherSldr'); };

function setSize(){ $('.mainGl').height($('.UPMode').height());};
     
//Создаём кнопки переключения        
    $('.mysld .t-container').append('<div class="btncont"><div class="leftbtn"></div><div class="rightbtn"></div></div>');    
//При нажатии правой кнопки
 $( ".rightbtn" ).click(function() {
    $('.mysld').addClass('inVismode').removeClass('UPMode');index++; if(index==changegl21.length){index=0};
    $(changegl21[index]+' .t764').addClass('UPMode').trigger('displayChanged');setSize();
});   
//При нажатии левой кнопки
 $( ".leftbtn" ).click(function() {
    $('.mysld').addClass('inVismode').removeClass('UPMode');index--; if(index<0){index=2};
    $(changegl21[index]+' .t764').addClass('UPMode').trigger('displayChanged');setSize();
});   
});
</script>
Made on
Tilda