Как создать горизонтальный скрол слайдер в Tilda: примеры и инструкции

Введение

Создание интерактивного и красивого слайдера — это один из ключевых элементов успешного дизайна сайта. Если вы используете конструктор сайтов Tilda, то вы можете легко создать слайдеры и карусели с горизонтальным скроллом при помощи Zero Block. В этой статье мы покажем, как сделать слайдер в Tilda, как настроить его и дадим несколько примеров слайдеров, которые вы можете использовать на своем сайте.

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

Горизонтальный скрол — это отличный способ отобразить большое количество контента на одной странице. В Tilda вы можете использовать горизонтальный скрол для создания каруселей с изображениями, отзывами клиентов или преимуществами вашего продукта. Фишка в том, что скролить придется не сверху вниз, а слева на право!

Как создать слайдер в Tilda. Элементы управления

Перед тем как начать, вам нужно выбрать zero block на вашем Tilda сайте. В нем вы найдете все необходимые элементы для создания привлекательных слайдеров. Следуйте следующим шагам, чтобы создать свой слайдер в Tilda:

1. Создайте zero block.
2. Нажмите на кнопку «Редактировать блок».
3. Удалите стандартное наполнение блока.
4. В поле «GRID CONTAINER HEIGHT» пропишите значение высоты блока. Например, 60px.
5. Добавьте в этот блок элементы управления слайдером. В этом примере мы будем использовать стандартные кнопки (Add Button).
6. Добавьте две кнопки. Отредактируйте в них текст и расположите по своему усмотрению.
7. Нажмите на первую кнопку правой кнопкой мыши и выберите пункт «Add css class name».
8. Пропишите класс «btn__left».
9. Для второй кнопки пропишите класс «btn__right».
10. Слайдер управляется как кнопками, так и перетаскиванием курсора мыши или «свайпом» на мобильных устройствах.

Мы предлагаем стилизовать кнопки с помощью css кода. Для этого:

1. Удалите стандартную фоновую заливку у обеих кнопок.
2. Нажмите на кнопку «+» и выберите пункт «Add HTML».
3. Скопируйте и вставьте в html блок следующий код:

<style>
    .btn__left, .btn__right {
        background: linear-gradient(269.8deg, #1D9884 2.45%, #41F270 99.86%); //градиентный фон
        border-radius: 30px; //округление границ
	cursor: pointer; //курсор мыши при наведении
    }
</style>

Сохраните изменения и выйдите из зеро блока.

Как создать слайдер в Tilda. Настройка слайдов

Переходим к созданию и настройке слайдов для нашего тильда слайдера.

1. Создайте еще один zero block.
2. Нажмите на кнопку «Редактировать блок».
3. Удалите стандартное наполнение блока.
4. В поле «OVERFLOW» выберите «auto».
5. Для создания слайда вы можете использовать shape или image. В этом примере мы будем использовать изображения.
6. Нажмите на кнопку «+», выберите «Add Image» и загрузите свой первый слайд.
7. Расположите его в удобном для вас месте.
8. Последующие слайды расположите рядом с первым. Отступы между слайдами определяйте самостоятельно. Слайды должны располагаться друг за другом слева на право.
9. Чтобы слайдер был адаптивным, измените размеры и расположение слайдов для всех размеров мобильных экранов.
10. Сохраните изменения и выйдите из зеро блока.
11. Добавьте блок «Т123. HTML-код».
12. Скопируйте и вставьте код:

<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%;
}

</style>

<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>
<script>
$(function() {

    // Укажи ID Zero блока cо лайдами
     let blockScrollId = '#rec558044693';
    
    // Укажи ID Zero блока cо стрелками 
    let blockArrowsId = '#rec558876077';
    
    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';
        }

    });
    
    
    $(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();
        $(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '-=' + shiftSize }, 300);
    });

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

});
</script>

Cохраните изменения и опубликуйте страницу. Вы научились делать скрол слайдер в Tilda Publishing.

Заключение

В заключении можно еще раз подчеркнуть, что использование слайдера в Tilda может быть очень полезным и эффективным для создания удобного пользовательского интерфейса на вашем сайте. Слайдер в Tilda — это простой в использовании, но мощный инструмент для создания интерактивных и привлекательных страниц на вашем сайте. Надеемся, что наша статья помогла вам узнать больше о возможностях Tilda Publishing и способах использования слайдера в веб-дизайне.

Узнайте о других видах слайдеров в нашей статье или на нашем YouTube канале.