Горизонтальный скролл со стрелками в Zero Block

Модификация добавляет горизонтальному скроллу управление при помощи стрелок. А также элементы могут скроллиться с помощью прокрутки и удержания кнопкой мыши. Решение скрывает горизонтальный скроллбар. Демо решения.

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

Создай zero block с элементами для скролла, настрой overflow: auto и задай блоку класс .uc-scroll

Создай отдельный zero block с элементами, которые нужно скроллить. В настройках блока поставь overflow: auto. Укажи блоку свой css-класс, инструкция как добавить.

Подсказка: добавь прозрачный шейп справа в конце всех элементов, чтобы появился отступ от окна справа, когда весь контент проскроллили.
Создай zero block со стрелками, блоку задай класс .uc-arrows, стрелкам задай классы .yu-arrow-left и .yu-arrow-right

Создай отдельный zero block со стрелками. Каждая стрелка — это шейп. Укажи каждому шейпу свой css-класс, инструкция как добавить. Укажи блоку свой css-класс, инструкция как добавить.
Настрой величину сдвига в генераторе, например: 320px

Укажи величину сдвига для каждого разрешения, вписывай значения вместе с единицей измерения.
Установи код на сайт в блок T123

Скопируй готовый код и вставь его в блок T123, памятка по вставке кода.
Проверь настройки jQuery

Подключи jQuery в настройках сайта, если ранее не включали: Настройки сайта → «Ещё» → поставь галочку на «Подключить jQuery на страницах сайта».

Если на странице несколько горизонтальных скроллов, то для каждого сгенерируй новый код с другими классами для стрелок и другими классами или id блоков.

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

<script>
$(function() {

    // Укажи ID Zero блока cо скроллом и включи overflow: auto
    var blockScrollId = '.uc-scroll';
    
    // Укажи ID Zero блока cо стрелками и добавь каждой класс arrow-left или arrow-right
    var blockArrowsId = '.uc-arrows';
    
    var shiftSize;
    $(window).on('load resize', function(){
        
        if (window.matchMedia('(max-width: 480px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешений 320-480px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 640px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешений 481-640px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 960px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешений 641-960px
            shiftSize = '320px';
        }
        else if (window.matchMedia('(max-width: 1200px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешений 961-1200px
            shiftSize = '320px';
        }
        else {
            // Укажи величину сдвига при клике на стрелку для разрешений больше 1200px
            shiftSize = '320px';
        }

    });
    
    
    $(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
    $(blockScrollId + ' .t396').css('overflow','hidden');
    
    new ScrollBooster({
        viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
        content:  $(blockScrollId + ' .scrollbooster-content')[0],
        scrollMode: 'native',
        pointerMode: 'mouse',
        bounce: false,
        onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
    });

    $(blockArrowsId + ' .yu-arrow-left').on('click', function(e) {
        e.preventDefault();
        $(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '-=' + shiftSize }, 300);
    });

    $(blockArrowsId + ' .yu-arrow-right').on('click', function(e) {
        e.preventDefault();
        $(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '+=' + shiftSize }, 300);
    });
    
    t396__onResize()

});
</script>

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

Понравилось решение?