Как сделать слайдер до после в Tilda. Пошаговая инструкция
Содержимое
Вступление
Слайдер до и после в Tilda (или “before and after slider”) — это популярный инструмент веб-дизайна. Он позволяет пользователю увидеть изменения на веб-странице, сравнивая ее состояние до и после применения определенных изменений. Например, вы можете использовать слайдер до и после, чтобы показать изменения в дизайне сайта.
Tilda — это популярный конструктор сайтов, который предоставляет своим пользователям широкий выбор инструментов и функций для создания красивых и эффективных веб-страниц. Один из таких инструментов — это слайдер до и после, который может быть легко добавлен на любую страницу, созданную с помощью Tilda.
Как добавить слайдер до после в Tilda
Чтобы добавить слайдер до и после в Tilda, необходимо выполнить несколько простых шагов. Вот они:
- Создайте zero block.
- Удалите лишние элементы в блоке.
- Нажмите на кнопку «+» и выберите «Add Image».
- Загрузите в зеро блок первое изображение для вашего слайдера.
- Точно также загрузите второе изображение.
- Оба изображения вынесите за пределы видимости зеро блока.
- Нажмите на кнопку «+» и выберите «Add HTML».
- Cкопируйте в html элемент следующий код:
<style>
.sliderba {
width: 60%; /* Ширина слайдера в процентах*/
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.slider {
position: relative;
width: 100%;
height: auto;
}
.slider__before,
.slider__after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
}
.slider__before img,
.slider__after img {
display: block;
width: 100%;
height: auto;
user-select: none;
}
.slider__handle {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%; /* Радиус скругления слайдера*/
background-color: #fff; /* Цвет переключателя*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
</style>
<div class="sliderba">
<div class="slider">
<div class="slider__before">
<!-- Ссылка на первое изображение -->
<img src="ссылка" alt="Before">
</div>
<div class="slider__after">
<!-- Ссылка на второе изображение -->
<img src="ссылка" alt="After">
</div>
<div class="slider__handle"></div>
</div>
</div>
<script>
let slider = document.querySelector('.slider');
let handle = slider.querySelector('.slider__handle');
let beforeImg = slider.querySelector('.slider__before img');
let afterImg = slider.querySelector('.slider__after img');
let isDragging = false;
slider.addEventListener('mousedown', () => {
isDragging = true;
slider.classList.add('dragging');
});
slider.addEventListener('mouseup', () => {
isDragging = false;
slider.classList.remove('dragging');
});
slider.addEventListener('mousemove', e => {
if (!isDragging) return;
let xPos = e.clientX - slider.offsetLeft;
xPos = Math.max(0, xPos);
xPos = Math.min(xPos, slider.offsetWidth);
handle.style.left = xPos + 'px';
beforeImg.style.width = xPos + 'px';
afterImg.style.width = `calc(100% - ${xPos}px)`;
});
</script>


- Сохраните изменения и закройте html элемент.
- Нажмите на первое изображение правой кнопкой мыши и выберите пункт «Copy image url».
- Вернитесь в html элемент и вставьте скопированную ссылку на изображение вместо первого слова «ссылка».
- Таким же образом скопируйте ссылку на второе изображение и вставьте её в код вместо второго слова «ссылка».
- Выделите html элемент левой кнопкой мыши.
- В полях «W» и «H» вместо пикселей выберите проценты.
- Нажмите на «+container», в поле «CONTAINER» выберите «Window container».
- В полях «AXIS X» и «AXIS Y» выберите «center».
- Сохраните изменения и закройте zero block.
- Опубликуйте страницу.
Как использовать слайдер до после в Tilda
С помощью слайдера до и после в Tilda вы можете создавать наглядные примеры вашей работы или просто добавлять визуальный интерес на странице. Будь то улучшение интерфейса, добавление новых функций или улучшение качества продукта, слайдер до и после может помочь вам эффективно передать эти изменения вашим клиентам или потенциальным покупателям.

Кроме того, слайдер до и после может быть полезен при создании веб-страниц для сравнения продуктов или услуг, например, сравнения старой и новой версии продукта или различных вариантов цветовой схемы. Это помогает пользователям лучше понимать, какие изменения были внесены и как они могут повлиять на их опыт использования продукта или услуги.
Слайдер до и после также может быть использован в медицинских, косметических или других профессиональных сферах. Например, слайдер может показать результаты хирургической операции или эффект от использования косметических средств.
Как создать слайдер до после в Тильда. Видео версия
Заключение
В заключение, слайдер до и после является эффективным инструментом веб-дизайна. Добавление слайдера до и после на вашу веб-страницу поможет вам создать наглядные и впечатляющие примеры работы. Еще вы сможете продемонстрировать изменения вашего продукта или услуги и улучшить пользовательский опыт на вашем сайте.
Читайте также: горизонтальный скролл слайдер в тильда
Смотрите обучающие видео уроки по Тильде тут