Автоматический скролл слайдер в Tilda. Улучшение пользовательского опыта на вашем веб-сайте
Содержимое
Введение
В современную цифровую эпоху наличие привлекательного онлайн-присутствия является неотъемлемым элементом как для бизнеса, так и для частных лиц. Веб-сайты играют ключевую роль в передаче информации, продвижении товаров или услуг и взаимодействии с посетителями. Один из эффективных способов сделать ваш веб-сайт более привлекательным и удобным для пользователей — это внедрить автоматический скролл слайдер в Tilda. В этой статье мы рассмотрим, что представляет собой автоматический скроллинг слайдера, почему он ценен для вашего веб-сайта и как его легко использовать на вашем тильда сайте.
Понимание автоматического скроллинга слайдера
Автоматический скроллинг слайдера — это динамический элемент веб-сайта, который позволяет автоматически прокручивать контент вашего сайта, такой как изображения, текст или видео, из одной секции в другую, создавая привлекательный визуальный эффект. Он заменяет необходимость пользователям вручную взаимодействовать с вашим контентом, предлагая плавный и увлекательный опыт просмотра.
Для чего нужен автоматический скролл слайдер в Tilda
- Повышенное вовлечение пользователей: Автоматические скроллинги слайдеров привлекают внимание посетителей, побуждая их оставаться на вашем сайте дольше.
- Визуальное повествование: Они позволяют рассказать визуальную историю, направляя пользователей через ваш контент шаг за шагом.
- Выделение ключевой информации: Вы можете использовать слайдер для выделения важной информации или продуктов.
Как создать автоматический скролл слайдер в Tilda
Автоматический скролл слайдер в Tida мы будем создавать, используя два нулевых блока (zero block) и html блок Т123. Далее мы приводим пошаговый план действий:
- Создайте zero block
- Внутри блока нажмите кнопку «Редактировать блок»
- Уберите лишнее наполнение блока
- В настройках блока найдите пункт «POSITION AND OVERFLOW»
- В пункте «OVERFLOW» выберите «auto»
- Добавьте в этот блок элементы, которые будут служить в качестве слайдов
- Каждый слайд расположите после предыдущего
- Первый слайд должен располагаться в начале блока, а последний – выходить за пределы блока.
- Адаптируйте слайды для всех возможных размеров экранов в zero block
- Сохраните и закройте zero block
Мы создали зеро блок, который является основой нашего слайдера, и добавили в него слайды.
Теперь создадим основу для кнопок управления слайдером в тильда и добавим в сами кнопки.
Для этого:
- Создайте еще один zero block
- Зайдите в редактор и очистите содержимое
- Сделайте высоту блока максимально маленькой
- Используйте в качестве кнопок картинки, текст, стандартные кнопки тильды, shape и т.д.
- Расположите кнопки в удобном для вас месте
- Нажмите правой кнопкой мыши на левую кнопку управления слайдом и выберите пункт «Add css class name»
- В появившемся поле введите класс «btn__left»
- Нажмите правой кнопкой мыши на правую кнопку управления слайдом и выберите пункт «Add css class name»
- В появившемся поле введите класс «btn__right»
- Сохраните изменения и закройте нулевой блок тильды с кнопками

Мы подготовили два блока: сам автоматический скролл слайдер в tilda и блок с кнопками для этого сайта. Настало время объединить два этих блока с помощью кода. Для этого:
- Создайте HTML блок «Т123»
- Нажмите на копку «Контент»
- Скопируйте и вставьте в «Контент» следующий код:
<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>


- Cохраните изменения и закройте блок с кодом
- Зайдите в настройки блока со слайдером и скопируйте его ID
- Зайдите в «Контент» блока «Т123» и вставьте скопированный ID в качестве значения для переменной «let blockScrollId»
- Зайдите в настройки блока с кнопками и скопируйте его ID
- Зайдите в «Контент» блока «Т123» и вставьте скопированный ID в качестве значения для переменной «let blockArrowsId»
- Сохраните изменения и опубликуйте страницу
Заключение
Внедрение автоматического скроллинга слайдера в Tilda может значительно улучшить пользовательский опыт вашего веб-сайта. Это визуально привлекательный способ взаимодействия с вашей аудиторией, рассказа истории и выделения важной информации. Следуя описанным в этой статье шагам и учитывая предоставленные советы, вы можете легко интегрировать эту функцию на вашем сайте Tilda.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Эффект наложения блоков при скролле