Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD016--><script src='https://cdn.jsdelivr.net/npm/dragscroll@0.0.8/dragscroll.min.js'></script>
<script>
var ticodescroll = $('#rec645419189');
ticodescroll.find('.t396__artboard').addClass('dragscroll');
var ticodearrow = $('#rec645419188');
var isScrolledToEnd = false;
function getScrollDistance() {
var screenWidth = $(window).width();
if (screenWidth > 1200) {
return 300;
} else if (screenWidth > 960) {
return 200;
} else if (screenWidth > 640) {
return 200;
} else if (screenWidth > 480) {
return 100;
} else {
return 300;
}
}
ticodearrow.find('.ti-arrow-left').on('click', function() {
var scrollDistance = getScrollDistance();
var targetElement = $(this).closest('#rec645419188').siblings('#rec645419189').find('.t396__artboard');
targetElement.animate({ scrollLeft: targetElement.scrollLeft() - scrollDistance }, 500);
});
ticodearrow.find('.ti-arrow-right').on('click', function() {
var scrollDistance = getScrollDistance();
var targetElement = $(this).closest('#rec645419188').siblings('#rec645419189').find('.t396__artboard');
targetElement.animate({ scrollLeft: targetElement.scrollLeft() + scrollDistance }, 500);
});
var dragscrollElement = $('.dragscroll');
dragscrollElement.on('mousedown', function() {
dragscrollElement.addClass('disable-scrolling');
});
$(document).on('mouseup', function() {
dragscrollElement.removeClass('disable-scrolling');
});
</script>
<style>
.ti-arrow-right, .ti-arrow-left {
cursor: pointer;
}
#rec645419189 .t396__artboard::-webkit-scrollbar {
display: none;
}
@media (min-width: 320px) {
.dragscroll {
cursor: -webkit-grab;
cursor: grab;
transition: all 0.7s ease;
}
.dragscroll:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
}
.disable-scrolling::-webkit-scrollbar {
display: none;
}
</style>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery. Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block и в настройках блока выставляем параметр Owerflow в режим Auto
2. Размещаем в блоке весь необходимый контент(все что выходит горизонтально за пределы сетки тильда будет скролиться). Важно чтобы контент не выходил вертикально за пределы блока иначе включиться вертикальный скролл от Тильда.
3. Создаем второй Zero Block в котором размещаем две кнопки со стрелками(это может быть кнопка, текст, шейп или изображение). Стрелкам назначаем классы ti-arrow-left(для прокрутки влево) и ti-arrow-right (для прокрутки вправо) Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
4. Копируем id Zero Block скрола и id блока со стрелками и вставляем их в генератор кода
5. При необходимости указываем в генераторе дополнительные настройки: Показывать курсор(Grab) в блоке скрола? - возможность включить курсор в виде ладошки при наведении на блок скролла. Можно выбрать экраны на которых показывать курсор; Скролл курсором - можно включить или выключить прокрутку блока курсором; Возврат скрола при финише - при включённой опции будет возвращать блок в самое начало если тот был уже доскролен.
6. Копируем готовый код и вставляем его в HTML блок T123
Примечание: Добавьте в самый конец скролла небольшой невидимый шейп шириной 40px. Это нужно чтобы при скролле справа был небольшой отступ