Слайдер "До/Після" ідеально підходить для порівняння двох зображень поруч і підкреслення різниці за допомогою інтерактивного повзунка. Ось як це зробити:
Крок 1: Додайте нову секцію
Додайте порожній розділ на сторінку там, де ви хочете розмістити слайдер.
Крок 2: Виберіть елемент "До/Після"
Натисніть на іконку + у порожній секції, введіть "До / Після" у рядку пошуку та додайте елемент.
Крок 3: Завантажте зображення
Завантажте два зображення, які ви хочете порівняти.
📌 Примітка: Переконайтеся, що обидва зображення зроблені з однакової відстані та ракурсу, а також мають однаковий розмір для досягнення гармонійного ефекту.
Крок 4: Налаштуйте слайдер
Тепер ви можете додатково налаштувати свій слайдер.
Замість інтерактивного повзунка ви також можете увімкнути "Розділений перегляд", якщо хочете, щоб зображення просто відображалися поруч для прямого порівняння.
Ви можете додати мітки, щоб позначити, наприклад, "До" та "Після".
За бажанням можна активувати відтінки сірого у зображенні, щоб ще більше підкреслити ефект порівняння.
Крок 5: Налаштуйте дизайн
Нарешті, ви можете внести корективи в дизайн.
Ви можете налаштувати іконку повзунка, обравши саму іконку, її розмір, колір та радіус заокруглення.
Крім того, можна налаштувати роздільник, наприклад, його ширину та колір.
Ви також можете вибрати, як саме відображати порівняння - горизонтально чи вертикально, а також вказати, чи має слайдер рухатися за допомогою перетягування чи при наведенні курсора.
У вас також є можливість встановити зображення на всю ширину та висоту екрана, а також додати закруглені кути та тіні.
💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂