Автоматический скролл слайдер в Tilda. Улучшение пользовательского опыта на вашем веб-сайте

<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%;
    }
    
    .btn__left, .btn__right {
        cursor: pointer;
        user-select: none;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {
    // Укажите ID Zero блока с лайдами
    let blockScrollId = '#rec638041671';

    // Укажите ID Zero блока с стрелками
    let blockArrowsId = '#rec638042866';

    let 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';
        }

    });

    // Функция для автоматического перелистывания слайдов с анимацией
    function autoSlide() {
        let $artboard = $(blockScrollId + ' .t396__artboard');
        let currentScrollLeft = $artboard.scrollLeft();
        let scrollWidth = $artboard.get(0).scrollWidth;

        if (currentScrollLeft >= scrollWidth - $artboard.width()) {
            // Если достигнут конец, переключаемся в обратную сторону с анимацией easeInOutSine
            $artboard.animate({ scrollLeft: 0 }, 300, 'easeInOutSine');
        } else {
            $artboard.animate({ scrollLeft: '+=' + shiftSize }, 300, 'easeInOutSine');
        }
    }

    // Запустить автоматическое перелистывание каждые 5 секунд (или другой интервал, который вам нужен)
    let intervalId = setInterval(autoSlide, 500); // 5000 миллисекунд = 5 секунд

    // Приостановить автоматическое перелистывание при наведении мыши
    $(blockScrollId + ', ' + blockArrowsId).on('mouseenter', function() {
    clearInterval(intervalId); // Остановить интервал
    });
    

    // Возобновить автоматическое перелистывание при уходе мыши
    $(blockScrollId + ', ' + blockArrowsId).on('mouseleave', function() {
        intervalId = setInterval(autoSlide, 500); // Запустить интервал снова
    });
   

    // Ваш код для ScrollBooster и кнопок переключения слайдов
    $(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 + ' .btn__left').on('click', function(e) {
        e.preventDefault();
        let $artboard = $(blockScrollId + ' .t396__artboard');
        let currentScrollLeft = $artboard.scrollLeft();
        if (currentScrollLeft === 0) {
            $artboard.animate({ scrollLeft: $artboard.width() }, 300, 'easeInOutSine'); // Перейти в конец с анимацией easeInOutSine
        } else {
            $artboard.animate( { scrollLeft: '-=' + shiftSize }, 300, 'easeInOutSine');
        }
    });

    $(blockArrowsId + ' .btn__right').on('click', function(e) {
        e.preventDefault();
        let $artboard = $(blockScrollId + ' .t396__artboard');
        let currentScrollLeft = $artboard.scrollLeft();
        let scrollWidth = $artboard.get(0).scrollWidth;
        if (currentScrollLeft >= scrollWidth - $artboard.width()) {
            $artboard.animate({ scrollLeft: 0 }, 300, 'easeInOutSine'); // Перейти в начало с анимацией easeInOutSine
        } else {
            $artboard.animate( { scrollLeft: '+=' + shiftSize }, 300, 'easeInOutSine');
        }
    });

});
</script>