Автоматический адаптивный слайдер в Tilda zero block

Введение

Желаете сделать ваш сайт на Tilda более динамичным и привлекательным для посетителей? Решение простое – воспользуйтесь автоматическим адаптивным слайдером в Tilda! Этот удивительный инструмент позволит вам создать потрясающие презентации и повысить эффективность вашего сайта в несколько раз. В этой статье, мы рассмотрим, как использовать “Автоматический адаптивный слайдер в Tilda” для создания захватывающих и интерактивных контент-блоков.

Автоматический адаптивный слайдер: Ваш путь к динамичному контенту

Итак, что же такое “Автоматический адаптивный слайдер в Tilda” и как он может улучшить ваш сайт? Этот инструмент – ваш верный спутник в создании эффективных презентаций, слайд-шоу и информационных блоков. Вне зависимости от того, представляете ли вы продукты, услуги или просто хотите рассказать о чем-то интересном, автоматический адаптивный слайдер делает это максимально привлекательным и удобным.

Почему “Автоматический адаптивный слайдер в Tilda” — это ваш выбор?

Простота в использовании. Даже если вы новичок в веб-дизайне, этот инструмент позволит вам легко создавать красочные слайды, не требуя специальных навыков.

Адаптивность. Ваш контент будет отлично выглядеть на всех устройствах – от компьютеров до смартфонов.

Автоматизация. Забудьте о ручном переключении слайдов. Автоматический режим позаботится об интерактивности вашего контента.

Как создать Автоматический адаптивный слайдер в Tilda zero block

Для создания слайдера вам понадобится один зеро блок в качестве контейнера и несколько любых других блоков в качестве слайдов. Но, давайте по порядку:

1. Создайте zero block
2. Удалите из него все элементы и фоновый цвет
3. После этого блока создайте блоки со слайдами
4. Если в качестве слайдов вы используете зеро блоки, то каждый блок необходимо вручную адаптировать под все размеры экранов
5. В настройках каждого слайда (блока) в поле «BLOCK CSS CLASS NAME» пропишите класс «uc-sld_items»
6. После всех блоков создайте блок «Т123»
7. Скопируйте в него следующий код:

<style>
    /* ID пустого блока */	
    #rec658133609 {
        display: flex;
        position: relative;
    }
    /* Класс слайдов */
    .uc-sld_items {
        margin: 0 !important;
        display: none;
        width: 100%;
        height: 100%;
    }
    #leftsld {
        z-index: 10000;
        width: 60px;
        height: 60px;
        cursor: pointer;
        position: absolute;
        left: 80px;
        top: 50%; /
        transform: translateY(-50%); 
    }
    #rightsld {
        z-index: 10000;
        width: 60px;
        height: 60px;
        cursor: pointer;
        position: absolute;
        right: 80px;
        top: 50%; /
        transform: translateY(-50%);
    }
    #leftsld:hover, #rightsld:hover {
        scale: 1.1;
    }
    @media (max-width: 800px) {
        #leftsld {
            left: 20px;
        }
        #rightsld {
            right: 20px;
        }
    }
    
</style>
<img src="ссылка на иконку кнопки" id='leftsld' alt=""> 
<img src="ссылка на иконку кнопки" id='rightsld' alt="">
<script>
    var currentSlide = 0; 
    var sliderItems = document.querySelectorAll(".uc-sld_items");
    var slidercont = document.getElementById ("rec658133609"); // ID пустого zero block
    let lbutton = document.getElementById ("leftsld");
    let rbutton = document.getElementById ("rightsld");
    let slide = document.getElementById ("rec658133726"); //ID слайда
    let slide2 = document.getElementById ("rec658136997"); //ID слайда
    let slide3 = document.getElementById ("rec658137855"); //ID слайда
    let autoSlideInterval;

    
    slidercont.appendChild(lbutton);
    slidercont.appendChild(rbutton);
    slidercont.appendChild(slide);
    slidercont.appendChild(slide2);
    slidercont.appendChild(slide3);
    
    sliderItems[currentSlide].style.display = "block";

    function nextSlide() {
        sliderItems[currentSlide].style.display = "none"; // Скрываем текущий блок
        currentSlide = (currentSlide + 1) % sliderItems.length; // Переходим к следующему блоку
        sliderItems[currentSlide].style.display = "block"; // Показываем новый блок
    }

    function prevSlide() {
        sliderItems[currentSlide].style.display = "none"; // Скрываем текущий блок
        currentSlide = (currentSlide - 1 + sliderItems.length) % sliderItems.length; // Переходим к предыдущему блоку
        sliderItems[currentSlide].style.display = "block"; // Показываем новый блок
    }
    // Функция для запуска автоматического переключения слайдов
    function startAutoSlide() {
        autoSlideInterval = setInterval(nextSlide, 5000);
    }

    function stopAutoSlide() {
        clearInterval(autoSlideInterval);
    }

    rbutton.addEventListener("click", () => {
        nextSlide();
        stopAutoSlide();
    });

    lbutton.addEventListener("click", () => {
        prevSlide();
        stopAutoSlide();
    });

    slidercont.addEventListener("mouseenter", stopAutoSlide);
    slidercont.addEventListener("mouseleave", startAutoSlide);
    
    startAutoSlide();

    //rbutton.addEventListener("click", nextSlide); 
    //lbutton.addEventListener("click", prevSlide);
  
</script> 

8. Скопируйте ID пустого zero block и вставьте в код, в указанные места
9. Скопируйте ID слайдов и вставьте в код, в указанные места
10. Вернитесь в пустой zero block
11. Нажмите на кнопку «+» и выберите «Add Image»
12. Загрузите в блок иконку для левого переключателя слайдов
13. Таким же образом загрузите иконку для правого переключателя
14. Переместите две иконки за пределы блока
15. Нажмите правой кнопкой на каждую из иконок и выберите «Copy Image Url»
16. Вставьте скопированные ссылки в код, в указанные места
17. Сохраните изменения и опубликуйте страницу

Поздравляем, вы создали адаптивный слайдер, который переключается как автоматически, так и с помощью кнопок управления. Если хотите узнать, как отключить автоматическое переключение слайдов, посмотрите видео инструкцию.

Заключение

Автоматический адаптивный слайдер в Tilda — это ключ к созданию креативного и интерактивного контента, который запомнится вашим посетителям. Не стесняйтесь экспериментировать, добавлять анимации и делать ваш сайт более динамичным с этим удивительным инструментом. Не упустите возможность привлечь внимание и увеличить эффективность вашего сайта с “Автоматическим адаптивным слайдером в Tilda”.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda