Как сделать слайдер до после в Tilda. Пошаговая инструкция

Вступление

Слайдер до и после в Tilda (или “before and after slider”) — это популярный инструмент веб-дизайна. Он позволяет пользователю увидеть изменения на веб-странице, сравнивая ее состояние до и после применения определенных изменений. Например, вы можете использовать слайдер до и после, чтобы показать изменения в дизайне сайта.

Tilda — это популярный конструктор сайтов, который предоставляет своим пользователям широкий выбор инструментов и функций для создания красивых и эффективных веб-страниц. Один из таких инструментов — это слайдер до и после, который может быть легко добавлен на любую страницу, созданную с помощью Tilda.

Как добавить слайдер до после в Tilda

Чтобы добавить слайдер до и после в Tilda, необходимо выполнить несколько простых шагов. Вот они:

1. Создайте zero block.
2. Удалите лишние элементы в блоке.
3. Нажмите на кнопку «+» и выберите «Add Image».
4. Загрузите в зеро блок первое изображение для вашего слайдера.
5. Точно также загрузите второе изображение.
6. Оба изображения вынесите за пределы видимости зеро блока.
7. Нажмите на кнопку «+» и выберите «Add HTML».
8. 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>  

9. Сохраните изменения и закройте html элемент.
10. Нажмите на первое изображение правой кнопкой мыши и выберите пункт «Copy image url».
11. Вернитесь в html элемент и вставьте скопированную ссылку на изображение вместо первого слова «ссылка».
12. Таким же образом скопируйте ссылку на второе изображение и вставьте её в код вместо второго слова «ссылка».
13. Выделите html элемент левой кнопкой мыши.
14. В полях «W» и «H» вместо пикселей выберите проценты.
15. Нажмите на «+container», в поле «CONTAINER» выберите «Window container».
16. В полях «AXIS X» и «AXIS Y» выберите «center».
17. Сохраните изменения и закройте zero block.
18. Опубликуйте страницу.

Как использовать слайдер до после в Tilda

С помощью слайдера до и после в Tilda вы можете создавать наглядные примеры вашей работы или просто добавлять визуальный интерес на странице. Будь то улучшение интерфейса, добавление новых функций или улучшение качества продукта, слайдер до и после может помочь вам эффективно передать эти изменения вашим клиентам или потенциальным покупателям.

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

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

Как создать слайдер до после в Тильда. Видео версия

Заключение

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

Читайте также: горизонтальный скролл слайдер в тильда

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