Боковой скрол со стрелками на Тильде в нулевом блоке

Данный код позволяет использовать горизонтальный скрол в Тильде для нулевых блоков со своими стрелками и размером прокрутки. Код позаимствован и немного улучшен. Прописал комментарии для удобства.

Исходный код взят с сайта https://romanyu.ru/skroll-strelki, на нем есть удобный конструктор, который поможет сделать готовый код для ваших блоков. Я немного его доработал чтобы работал с Автоскейлом Тильды, так как часто его использую.

Инструкция:

Создай Zero block с элементами, которые нужно скроллить. В настройках overflow поставь auto. Задайте класс всему блоку uc-content
Создай отдельно Zero block со стрелками. Каждая стрелка — это любой элемент. Для стрелки налево укажи класс arrow-left, для стрелки направо укажи класс arrow-right. А для всего блока укажите класс uc-arrow
Скопируй код и вставь на свой сайт в блок T123.

<!-- https://romanyu.ru/skroll-strelki -->
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {
    // Используем классы вместо ID
    var blockScrollSelector = '.uc-content';
    var blockArrowsSelector = '.uc-arrow';

    var shiftSize;

    $(window).on('load resize', function(){
        if (window.matchMedia('(max-width: 480px)').matches) {
            shiftSize = '295px';
        }
        else if (window.matchMedia('(max-width: 640px)').matches) {
            shiftSize = '295px';
        }
        else if (window.matchMedia('(max-width: 960px)').matches) {
            shiftSize = '295px';
        }
        else if (window.matchMedia('(max-width: 1200px)').matches) {
            shiftSize = '612px';
        }
        else {
            shiftSize = '612px';
        }
    });

    // Оборачиваем контент для ScrollBooster
    $(blockScrollSelector + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
    $(blockScrollSelector + ' .t396').css('overflow', 'hidden');

    // Инициализация ScrollBooster
    new ScrollBooster({
        viewport: $(blockScrollSelector + ' .scrollbooster-viewport')[0],
        content:  $(blockScrollSelector + ' .scrollbooster-content')[0],
        scrollMode: 'native',
        pointerMode: 'mouse',
        bounce: false,
        onPointerDown: function() { $(blockScrollSelector + ' *:focus').blur(); }
    });

    // Обработчики кликов по стрелкам
    $(blockArrowsSelector + ' .arrow-left').on('click', function(e) {
        e.preventDefault();
        $(blockScrollSelector + ' .t396__artboard').animate({ scrollLeft: '-=' + shiftSize }, 300);
    });

    $(blockArrowsSelector + ' .arrow-right').on('click', function(e) {
        e.preventDefault();
        $(blockScrollSelector + ' .t396__artboard').animate({ scrollLeft: '+=' + shiftSize }, 300);
    });
});
</script>

<style>
.scrollbooster-viewport {
    cursor: -webkit-grab;
    cursor: grab;
    padding-bottom: 0px;
    margin-bottom: -30px;
}
.scrollbooster-viewport:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.scrollbooster-content {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.arrow-left,
.arrow-right {
    cursor: pointer;
}
</style>

Данный код избавлен от стандартных номеров блоков в коде, сделал специально классами, чтобы можно было вставить код в подвал или меню сайта, без необходимости его постоянно дублировать. Но есть ограничение, такой слайдер должен быть один на одну страницу. Иначе скрипт будет просто путаться в двух блоках стрелок и в двух блоках контента.

Исходный код взят с сайта https://romanyu.ru/skroll-strelki, на нем есть удобный конструктор, который поможет сделать готовый код для ваших блоков. Я немного его доработал чтобы работал с Автоскейлом Тильды, так как часто его использую.