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

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

<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>


- Скопируйте ID пустого zero block и вставьте в код, в указанные места
- Скопируйте ID слайдов и вставьте в код, в указанные места
- Вернитесь в пустой zero block
- Нажмите на кнопку «+» и выберите «Add Image»
- Загрузите в блок иконку для левого переключателя слайдов
- Таким же образом загрузите иконку для правого переключателя
- Переместите две иконки за пределы блока
- Нажмите правой кнопкой на каждую из иконок и выберите «Copy Image Url»
- Вставьте скопированные ссылки в код, в указанные места
- Сохраните изменения и опубликуйте страницу
Поздравляем, вы создали адаптивный слайдер, который переключается как автоматически, так и с помощью кнопок управления. Если хотите узнать, как отключить автоматическое переключение слайдов, посмотрите видео инструкцию.
Заключение
Автоматический адаптивный слайдер в Tilda — это ключ к созданию креативного и интерактивного контента, который запомнится вашим посетителям. Не стесняйтесь экспериментировать, добавлять анимации и делать ваш сайт более динамичным с этим удивительным инструментом. Не упустите возможность привлечь внимание и увеличить эффективность вашего сайта с “Автоматическим адаптивным слайдером в Tilda”.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda