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

Оформить доступ с промокодом
100
Как сделать переключение GL20 через ZeroBlock в Tilda

Как сделать переключение GL20 через ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него 3 кнопки First, Second, Third со ссылками #category
3
Создали 3 блока GL20
4
Вставили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём плавное переключение для слайдера GL20 при помощи кнопок в ZeroBlock.
Длительность видео: 32 минуты
Фрагмент видео
Библиотека для примера

<style>
.activebtn {
    box-shadow: 0 1px #cacaca;
}
.triggerbtn{    transition:all 0.7s ease-in-out !important;}
.triggerbtn:hover {
    box-shadow: 0 1px #cacaca;
}
.glposition{
position:absolute;
width:100%;
top:0;
}
.indexlayer{
    z-index:-1;
    opacity:0;
}
.mainGlgallery{    position: relative;}
.glgallery{    transition:all 0.7s ease-in-out;}
</style>

<script>
$(document).ready(function(){
$('div[data-record-type="604"]').addClass('glgallery');
$('.glgallery').wrapAll('<div class="mainGlgallery"></div>').not(':first').addClass('glposition indexlayer');
//Класс для кнопок перекючения
$('a[href = "#category"]').addClass('triggerbtn');
$('.triggerbtn:first').addClass('activebtn');

//При нажатии на кнопку переключения
 $('.triggerbtn').click(function(e) {e.preventDefault();
    var btnindex = $(".triggerbtn").index(this); 
 	if(!$(this).hasClass("activebtn")) {
 	     $('.triggerbtn').removeClass('activebtn'); $(this).addClass('activebtn');
         $('.glgallery').addClass('indexlayer');
         $('.glgallery:eq('+btnindex+')').removeClass('indexlayer');
 	};
 });
});
</script>
Made on
Tilda