URL скопирован в буфер обмена!
Как сделать кастомные стрелки перелистывания в галерее Zero Block ?
С помощью данной модификации можно сделать свои стрелки для переключения изображений в галерее Zero Block. В качестве стрелок может использовать текст, кнопку, шейп или картинку.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс галереи
Класс для стрелки вправо
Класс для стрелки влево
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD073--><style>
.tn-elem .t-slds__arrow {
opacity: 0;
width: 0px !important;
height: 0px !important;
}
.tc-left, .tc-right {
cursor: pointer;
}
</style>
<script>
$(function(){
var TCDZeroSlider;
var TCDNextBtn = $('.tc-right');
var TCDNPrevBtn = $('.tc-left');
setTimeout(function(){
TCDZeroSlider = $('.tc-gallery');
}, 1000);
TCDNextBtn.click(function(){
TCDZeroSlider.find('[data-slide-direction="right"]').click();
});
TCDNPrevBtn.click(function(){
TCDZeroSlider.find('[data-slide-direction="left"]').click();
});
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block галерею и присваиваем ей класс ti-gallery
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем свои кнопки для пролистывания слайдов. В качестве кнопок можно использовать текст, шейп, картинку или кнопку. Кнопке которая листает вправо назначаем класс ti-next для кнопки которая листает влево класс ti-prev
3. Копируем готовый код и вставляем в HTML блок Т123.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем свои кнопки для пролистывания слайдов. В качестве кнопок можно использовать текст, шейп, картинку или кнопку. Кнопке которая листает вправо назначаем класс ti-next для кнопки которая листает влево класс ti-prev
3. Копируем готовый код и вставляем в HTML блок Т123.
