UP TITLE
Бесконечный слайдер в Тильде. Автоматическое переключение + свайп на мобильных
Введение
Приветствую, дорогие читатели! В современном мире веб-дизайна и пользовательского опыта создание привлекательных и интерактивных элементов становится все более важным. Один из таких элементов – бесконечный слайдер в Тильде. В этой статье мы поговорим о том, что представляет собой бесконечный слайдер, как его создать в Tilda, используя зеро блоки или обычные блоки, как добавить автоматическое переключение слайдов и возможность свайпа на мобильных устройствах.
Что такое бесконечный слайдер в Тильде
Бесконечный слайдер в Тильде — это элемент веб-дизайна, который позволяет перелистывать контент (такой как изображения, текст или видео) горизонтально или вертикально без конечной точки. После последнего слайда он автоматически возвращается к первому, создавая эффект бесконечного цикла.
Как создать бесконечный слайдер в Тильде
Tilda Publishing – это платформа для создания веб-сайтов, которая предлагает простой и интуитивно понятный интерфейс для работы с контентом. Для создания бесконечного слайдера в Тильде следуйте этим шагам:
  1. Создайте zero block
  2. В редакторе этого блока очистите его содержимое и удалите фоновую заливку
  3. Откройте настройки блока и в поле «Добавить CSS Class Name» пропишите класс «uc-slider-wrapper»
  4. Создайте еще один такой же пустой zero block без фонового цвета
  5. Второму пустому зеро блоку присвойте класс «uc-newslider»
  6. После этого приступайте к созданию слайдов. Слайды можно создавать как из зеро блоков, так и из стандартных блоков. Если вы используете зеро блоки, то их необходимо вручную адаптировать под другие размеры экранов ()
  7. Каждому слайду присвойте класс «uc-newslide»
  8. После всех блоков на странице создайте html блок «Т123»
  9. Нажмите на кнопку в «Контент» и скопируйте в него код тильда модификации:
  10. В коде нужно прописать две ссылки на иконки, с помощью которых можно будет переключать слайдер
  11. Используйте наше расширение для браузера, чтобы быстро получить прямую ссылку на свой файл и вставить её в код
  12. В коде можно настраивать размеры и расположение иконок, а также скорость автоматического переключения слайдов
  13. Сохраните изменения и опубликуйте страницу
ВАЖНО!
Для всех изображений внутри слайдов необходимо отключить функцию LAZYLOAD. А также высота всех слайдов должна быть одинаковой!
<style>
     .uc-slider-wrapper {
        position: relative;
        overflow: hidden;
        display: flex;
    }
    .uc-newslider {
        position: relative;
        display: flex;
        overflow: hidden; 
        scroll-behavior: smooth;
    }
    .uc-newslide {
        min-width: 100vw;
        width: 100vw;
    }
    #sldleft {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px; /*Ширина левой иконки*/
        height: 40px; /*Высота левой иконки*/
        cursor: pointer;
        left: 20px;  /*Расстояние слева между кнопкой и окном браузера*/
        z-index: 20;
    }
     #sldright {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px; /*Ширина правой иконки*/
        height: 40px; /*Высота правой иконки*/
        cursor: pointer;
        right: 20px; /*Расстояние справа между кнопкой и окном браузера*/
        z-index: 20;
    }
   
</style>
<img src='ссылка на левую кнопку' id='sldleft'> <!-- Вставьте ссылку на левую иконку-->
<img src='ссылка на правую кнопку' id='sldright'> <!-- Вставьте ссылку на правую иконку-->
<script>
var sliderWrapper = document.querySelector('.uc-slider-wrapper');var sliderContainer = document.querySelector('.uc-newslider');var leftButton = document.getElementById('sldleft');var rightButton = document.getElementById('sldright');var autoSlideInterval;var isScrolling = false;function slideRight() {if (!isScrolling) {isScrolling = true;var slideWidth = sliderContainer.querySelector('.uc-newslide').offsetWidth;var lastSlide = sliderContainer.querySelector('.uc-newslide:last-child');if (sliderContainer.scrollLeft + sliderContainer.clientWidth >= sliderContainer.scrollWidth - slideWidth) {var slidesCopy = [];slides.forEach(function(slide) {var clone = slide.cloneNode(true);slidesCopy.push(clone);});slidesCopy.forEach(function(clone) {sliderContainer.appendChild(clone);});}sliderContainer.scrollLeft += slideWidth;setTimeout(function() {isScrolling = false;}, 1000); }}if (leftButton !== null && rightButton !== null) {leftButton.addEventListener('click', function() {if (!isScrolling) {isScrolling = true;var slideWidth = sliderContainer.querySelector('.uc-newslide').offsetWidth;sliderContainer.scrollLeft -= slideWidth;setTimeout(function() {isScrolling = false;}, 1000); }});rightButton.addEventListener('click', function() {slideRight();});leftButton.addEventListener('mouseover', stopAutoSlide);leftButton.addEventListener('mouseout', startAutoSlide);rightButton.addEventListener('mouseover', stopAutoSlide);rightButton.addEventListener('mouseout', startAutoSlide);}sliderContainer.addEventListener('mouseover', stopAutoSlide);sliderContainer.addEventListener('mouseout', startAutoSlide);function stopAutoSlide() {clearInterval(autoSlideInterval);}function startAutoSlide() {autoSlideInterval = setInterval(slideRight, 5000); }startAutoSlide();var slides = document.querySelectorAll('.uc-newslide');sliderWrapper.appendChild(sliderContainer);sliderWrapper.appendChild(leftButton);sliderWrapper.appendChild(rightButton);slides.forEach(function(slide) {sliderContainer.appendChild(slide);});var touchstartX = 0;var touchendX = 0;sliderContainer.addEventListener('touchstart', function(event) {touchstartX = event.changedTouches[0].screenX;});sliderContainer.addEventListener('touchend', function(event) {touchendX = event.changedTouches[0].screenX;handleGesture();});function handleGesture() {if (touchendX < touchstartX) {slideRight();}if (touchendX > touchstartX) {if (!isScrolling) {isScrolling = true;var slideWidth = sliderContainer.querySelector('.uc-newslide').offsetWidth;sliderContainer.scrollLeft -= slideWidth;setTimeout(function() {isScrolling = false;}, 1000); }}}window.addEventListener('resize', function() {var slideWidth = sliderContainer.querySelector('.uc-newslide').offsetWidth;var scrollDistance = sliderContainer.scrollLeft;var index = Math.round(scrollDistance / slideWidth);var adjustedScrollDistance = index * slideWidth;sliderContainer.scrollLeft = adjustedScrollDistance;});
</script>
Автоматическое переключение слайдов
Автоматическое переключение слайдов в бесконечном слайдер в Тильде по умолчанию включено. Здесь вы также можете настроить время задержки между переключением слайдов.
Возможности свайпа на мобильных устройствах
Одним из ключевых преимуществ бесконечного слайдера является его совместимость с мобильными устройствами. С помощью свайпа пользователи могут легко перелистыввать слайды на сенсорных экранах, таких как смартфоны и планшеты. Это делает взаимодействие с контентом более естественным и удобным для пользователей, улучшая общий пользовательский опыт.
Часто задаваемые вопросы
1. Можно ли настроить скорость переключения слайдов?
Да, вы можете настроить скорость переключения слайдов в коде бесконечного слайдера.
2. Как добавить автоматическое переключение слайдов?
Автоматическое переключение слайдов в бесконечном слайдере по умолчанию будет включено в модификации.
3. Поддерживает ли бесконечный слайдер свайп на мобильных устройствах?
Да, наш бесконечный слайдер в Тильде поддерживает свайп на мобильных устройствах для удобного перелистывания контента.
4. Какие типы контента можно использовать в бесконечном слайдере?
Вы можете использовать различные типы контента, включая изображения, текст, видео и даже HTML-элементы.
5. Могу ли я добавить ссылки на слайды в бесконечном слайдере?
  • Да, вы можете добавлять ссылки на каждый слайд для перехода к соответствующему контенту или странице.
Бесконечный слайдер в Тильде — это мощный инструмент для создания интерактивного и привлекательного контента на веб-сайтах. Их использование может значительно улучшить пользовательский опыт, повысить уровень вовлеченности и увеличить конверсию. Не забывайте следовать лучшим практикам и оптимизировать их для SEO, чтобы максимально эффективно использовать этот инструмент.

© Mark Lungrin
Made on
Tilda