URL скопирован в буфер обмена!

Как сделать горизонтальный скролл со стрелками на Zero Block?

С помощью этой модификации можно сделать горизонтальную прокрутку Zero Block при помощи стрелок навигации или курсора мыши

Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode

Генератор кода

id Zero block с контентом
id блока со стрелками
Показывать курсор(Grab) в блоке скрола?
Скролл курсором
Возврат скрола при финише
Настройки дистанции скрола на различных экранах
Дистанция (экран 1200+)
Дистанция(экран до 1200)
Дистанция (экран до 960)
Дистанция (экран до 640)
Дистанция (экран до 480)
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--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. Это нужно чтобы при скролле справа был небольшой отступ
>
<
Made on
Tilda