Как создать горизонтальный скрол слайдер в Tilda: примеры и инструкции
Содержимое
Введение
Создание интерактивного и красивого слайдера — это один из ключевых элементов успешного дизайна сайта. Если вы используете конструктор сайтов Tilda, то вы можете легко создать слайдеры и карусели с горизонтальным скроллом при помощи Zero Block. В этой статье мы покажем, как сделать слайдер в Tilda, как настроить его и дадим несколько примеров слайдеров, которые вы можете использовать на своем сайте.
Что такое горизонтальный скрол
Горизонтальный скрол — это отличный способ отобразить большое количество контента на одной странице. В Tilda вы можете использовать горизонтальный скрол для создания каруселей с изображениями, отзывами клиентов или преимуществами вашего продукта. Фишка в том, что скролить придется не сверху вниз, а слева на право!
Как создать слайдер в Tilda. Элементы управления
Перед тем как начать, вам нужно выбрать zero block на вашем Tilda сайте. В нем вы найдете все необходимые элементы для создания привлекательных слайдеров. Следуйте следующим шагам, чтобы создать свой слайдер в Tilda:
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Удалите стандартное наполнение блока.
- В поле «GRID CONTAINER HEIGHT» пропишите значение высоты блока. Например, 60px.
- Добавьте в этот блок элементы управления слайдером. В этом примере мы будем использовать стандартные кнопки (Add Button).
- Добавьте две кнопки. Отредактируйте в них текст и расположите по своему усмотрению.
- Нажмите на первую кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите класс «btn__left».
- Для второй кнопки пропишите класс «btn__right».
- Слайдер управляется как кнопками, так и перетаскиванием курсора мыши или «свайпом» на мобильных устройствах.
Мы предлагаем стилизовать кнопки с помощью css кода. Для этого:
- Удалите стандартную фоновую заливку у обеих кнопок.
- Нажмите на кнопку «+» и выберите пункт «Add HTML».
- Скопируйте и вставьте в html блок следующий код:
<style>
.btn__left, .btn__right {
background: linear-gradient(269.8deg, #1D9884 2.45%, #41F270 99.86%); //градиентный фон
border-radius: 30px; //округление границ
cursor: pointer; //курсор мыши при наведении
}
</style>


Сохраните изменения и выйдите из зеро блока.
Как создать слайдер в Tilda. Настройка слайдов
Переходим к созданию и настройке слайдов для нашего тильда слайдера.

- Создайте еще один zero block.
- Нажмите на кнопку «Редактировать блок».
- Удалите стандартное наполнение блока.
- В поле «OVERFLOW» выберите «auto».
- Для создания слайда вы можете использовать shape или image. В этом примере мы будем использовать изображения.
- Нажмите на кнопку «+», выберите «Add Image» и загрузите свой первый слайд.
- Расположите его в удобном для вас месте.
- Последующие слайды расположите рядом с первым. Отступы между слайдами определяйте самостоятельно. Слайды должны располагаться друг за другом слева на право.
- Чтобы слайдер был адаптивным, измените размеры и расположение слайдов для всех размеров мобильных экранов.
- Сохраните изменения и выйдите из зеро блока.
- Добавьте блок «Т123. HTML-код».
- Скопируйте и вставьте код:
<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 канале.