Як зробити слайдер на Тільді із зеро-блоків

Вітаю! Детальна текстова інструкція до відео про те, як зробити не повноекранний слайдер на Tilda із zero-блоків.

Приклади, як Ви можете оформити слайдер у себе на сайті. У ньому можуть бути картки товарів, зображення, текст, фігури та ін.

Етапи створення слайдера

1. Створити зеро-блок та додати до нього необхідний контент. Це може бути будь-що: текст, зображення, різні елементи
2. У цьому ж zero-блоці створити шейп (shape), усередині якого будуть наші слайди. Розмістити його в потрібній частині блоку, де має бути слайдер. Обов'язково встановити lazy-load: off, а також прибрати заливку. Висота та ширина шейпа повинні збігатися з висотою та шириною слайдів. Якщо слайди будуть більшими за розміром, ніж шейп, то контент обріжеться
3. Створити елементи для перемикання слайдів. У моєму прикладі на відео були стрільці. Ви можете створити точки, фігури тощо. буд. Задати лівій стрілці посилання "#slider_left", а правою - "#slider_right". Як і для шейпа, встановити lazy-load: off.
4. Створити слайди із зеро-блоків. У мене це 3 zero-блоки, в яких знаходиться по 2 картки товарів. Обов'язково всьому контенту всередині зеро-блоку задати вирівнювання по window-контейнеру, а також "left" по осі X і "top" по осі Y. Це можна зробити в налаштуваннях елемента в правій панелі
5. Додати код. Я за основу брав код з сайту Тільдошний
6. Проставити ID блоків у HTML-код. Усередині самого коду російською написано, де необхідно вставляти ID. Його можна знайти у налаштуваннях блоку. Клас шейпа береться через перегляд коду елемента на сайті. Якщо щось у цьому кроці не зрозуміло, то на відео я все показую на проміжку 7:57-8:20.Також прописуємо в кінці коду висоту та ширину шейпа, який ми створили на 2 кроці

Примітки!

Ви можете зробити автоматичне перемикання слайдера, вставивши цей код у тег /script після "// Адаптивність: кінець":

//автоперегортання слайдів(true), відключити автоперегортання(false)
autoplay:true,
//Швидкість перегортання слайдів
autoplayTimeout: 3000,
//зупинка автоперегортання при наведенні
autoplayHoverPause:true,
// Адаптивність: кінець

Повинно вийти ось так:

Адаптація під мобільні пристрої:

У мобільній версії не поміститься вмістити дві, три та більше карток. Тому 2 варіанти:
1. Розтягнути шейп вертикально і робити картки всередині нього вертикально одна за одною. Все має працювати як на ПК. Просто слайдер стане вертикальним та довгим.
2. Зробіть горизонтально, щоб картки виходили за край пристрою. І потім додати горизонтальний скролл. Таким чином, картки будуть гортати на мобільному пальцем горизонтально.

Приклад, як це може виглядати на одному з моїх сайтів – linkparty.ru. А сам код для горизонтального скролла - https://romanyu.ru/skroll-s-uderzhaniem-knopki-myshi

Важливо, щоб не конфліктував код, зробити два блоки. Один слайдер для ПК з відображенням з 1200рх і нескінченно з моїм кодом вище, а другий до 1200рх і з горизонтальним скролом

Два і більше слайдерів на одній сторінці:

Якщо Ви хочете зробити кілька таких слайдерів на одній сторінці, то не забудьте поміняти в новому коді: клас шейпа, ID слайдів, посилання на стрілки (наприклад, #slider_left1 і #slider_right2), а також ОБОВ'ЯЗКОВО клас tildoshnaya-slider -owl» змініть на якийсь інший (наприклад, «tildoshnaya-slider-owl1»)

Якщо залишилися питання або Ви хочете замовити лендинг, що продає, то напишіть мені в соцмережах або в коментарях під відео.

Просимо звернути увагу: технічна підтримка Tilda Publishing не підтримує пов'язану з роботою коду

Всім у кого перестала працювати sbs анімація і на сторінці використовується слайдер від Тільдошної (або інший, який використовує в коді слайдер owl), додайте в код setTimeout, на скріншоті показані рядки, які додати.

1) Створюємо основний Zero блок і додаємо до нього елемент "SHAPE", в якому буде наш слайдер. У «SHAPE» потрібно забрати колір заднього фону, рамки, тіні.

2) Додаємо додаткові кілька блоків, які будуть слайдами. Всі елементи в слайдах повинні бути вирівняні "Container: Window - Left - Top". Положення цих елементів не змінюємо, завжди у лівому верхньому кутку, саме цю область «бачитиме» shape у першому блоці. Додаткові елементи можна переміщати в межах цього елемента. Додаємо контент - зображення (обов'язково відключаємо lazy load), кнопки, текст, форми.

3) Розміри по висоті shape та елементів – слайдів мають бути однакові.

4) Вставляємо код у блок T123 після всіх Zero блоків, що діють у скрипті.
вказуємо ось ці параметри -
/* Вказуємо висоту слайду */
height: 300px !important;
/* Вказуємо ширину слайду */
width: 300px !important;

5) Дізнаємося id блоків, які будуть слайдами, блоку в якому буде слайдер і class shape елемента, в основному блоці.

6) Замінюємо id та class shape елемента у перших рядках нашого коду.

8 рядок - ID блоку, в якому буде слайдер.
10 рядок – class елемента, в якому буде слайдер.
12 рядок - id блоків, через кому, які мають стати слайдами.

7) У блоці зі слайдером додаємо два зображення під стрілочки та вказуємо їм посилання #slider_left для стрілочки вліво та #slider_right для стрілочки вправо.

Налаштування слайдера:
21 рядок - циклічність слайдера.
25 рядок — кількість слайдів на одному екрані (після зміни треба перевірити, щоб все правильно відображалося)
28-43 рядки - адаптивність. Можна змінити кількість слайдів у мобільній або планшетній версії
(Номери рядків будуть видно коли розмістите код у блок T123, у редакторі)

Як зробити слайдер у Тільді всередині Zero block

Zero block tilda - це фантастичний інструмент для інтеграції слайдерів користувача в дизайн сайту. Він дозволяє створювати слайди для демонстрації контенту, а й дозволяє контролювати його повний функціонал. За допомогою нульового блоку tilda можна створити карусельний слайдер, щоб відвідувачі не відволікалися та залишалися довше на вашому сайті. По своїй суті додати такий слайдер всередину Zero block досить просто, чи потрібно шиш використовувати кілька рядків коду та розуміння того, які габарити слайдів мають бути. Я вже писав про впровадження робочого слайдера на сторінку. Але в цій статті буде розміщення слайдера усередині нульового блоку. А це трохи інший формат.

Якщо ви зацікавлені у питанні Як зробити слайдер у зеро блоці Тільда, то ось кілька кроків, які необхідно виконати:

Підключаємо відкриту бібліотеку слайдера

1. Щоб це зробити, скористайтеся кодом нижче і вставте його в простий HTML блок.

Кому цікаво, я використовую відкриту бібліотеку SWIPER при належному бажанні ви зможете провести свою власну кастомізацію.

Оновлено від 06.06.2023

Справа в тому, що Тільда ​​постійно покращує швидкість завантаження своєї платформи.Це дуже добре, але під роздачу потрапляє безліч своїх скриптів, завантаження яких починає відкладатися. Так і тут, якщо ви зіткнулися з тим, що після виконання всіх дій, згідно з інструкцією, слайдер не працює, то перенесіть цей код у самий верх сторінки або розмістіть його через налаштування проекту в розділі HEAD

Розміщуємо слайдер усередині zero block

2. Створюємо HTML блок для нашого слайдера і поміщаємо його всередину нульового блоку туди, куди вам потрібно. Структура верстки така:

Приклад розміщення html блоку для комп'ютера

Приклад розміщення html блоку для мобільної версії

Розберемо докладніше. mySwiper1 — це ім'я слайдера, до якого потім звертатиметься код. Якщо у вас два слайдери, то другий відповідно матиме ім'я mySwiper2. Я, як завжди, люблю оригінальність та унікальність. Клас slide1, slide2 і т.д - це як ви розумієте слайд 1, слайд 2. Якщо потрібно ще додати слайдів, то копіюйте весь рядок повністю і змінюйте цифру в цьому класі.

swiper-pagination — це клас для відображення буллетів знизу, якщо видалити цей рядок, то у вас не буде внизу крапок, які вказують на кількість слайдів у слайдері, вибачте вже за тофталогію

swiper-button-next - Це клас, який відповідає за наявність кнопки для гортання вперед. Відповідно prev - назад

3. Тепер потрібно визначитися з кількістю слайдів та габаритам слайдера під кожен екран. Вважатимемо що нам потрібно 7 слайдів. А габарити слайдів будуть такими:
- для ширини екрану від 480px до 1200 px габарити будуть 400px ширина та 400px висота
— для ширини екрану до 480px габарити будуть 300px ширина та 400px висота

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

Готуємо zero block слайди

1.Оскільки в пункті 3 ми визначилися з розмірами слайдів, то створюємо новий zero block. Встановлюємо висоту контейнера 400px для всіх екранів. Як background-color встановлюємо порожнечу.

2. Створюємо необхідні нам блоки, робимо дизайн і т.д. Однак потрібно звернути увагу, що для всіх екранів крім мобільного (480px) я ставлю розміри: 400px ширина і 400px висота. Зверніть увагу:

• Для всіх елементів вибрано позиціонування щодо екрана Windows Container (Left, Top)
• Загальна структура блоків розташована з лівого краю. Це зроблено для того, щоб коректно відображати цей слайд усередині самого слайдера.

Для мобільної версії ширина слайду буде іншою, у моєму прикладі це 300px. Але вся композиція вирівнюється так само до лівого верхнього краю. Висота слайду так і залишилася 400px

3. Адаптуємо для всіх екранів і далі просто дублюємо блоки. і вже у кожному створюємо свій контент

Активуємо слайдер

HTML структуру розмістили всередині нульового блоку, самі створили слайди (у моєму прикладі 7 штук). Тепер настав час увімкнення слайдера

1. Для цього у кожного слайда (нульового блоку) копіюємо ID блоку та за рахунок коду переносимо у слайдер

Отже, #rec549157243 - це ID нульового блоку нашого першого слайду, #rec549432944 - це ID нульового блоку сьомого слайду. Всі ID номери можна переглянути в налаштуваннях ZeroBlock

slide1 … slide7 — це класи, які ми раніше прописували в HTML структурі, mySwiper1 - Це назва нашого слайдера для Тільди.

2. Тепер прописуємо код ініціалізації слайдера

У попередній статті не було цього рядка clickable: true, Вона означає, що точки, які показують кількість слайдів будуть клікабельними і перемикати на свій номер слайду

3. Залишилося дуже мало. Система поки що не знає стилів оформлення.Тому потрібно прописати CSS-код для завдання габаритів слайдів + оформлення кнопок

Слайдер усередині zero block готовий, ось що вийшло для комп'ютера

А ось що вийшло для телефону

Нарешті, коли все буде перевірено, опублікуйте сайт та насолоджуйтесь його новим яскравим доповненням! Як краще розташувати блоки на сторінці, читайте тут:

У цій статті розберемо як створити слайдер із zeroblock слайдів за допомогою стандартного html блоку + варіанти слайдерів (нескінченний, автоматичний)

Важливий анонс

Я знаю, як важко знайти корисну інформацію про промокод Tilda в цьому океані цифрової творчості. Сам, як вед-дизайнер, я стикався з нестачею якісного контенту на цю тему.

Я створив цикл міні-уроків – це не просто збірка базових знань. Це занурення у тонкощі реалізації різних схем використання унікальних промокодів на Tilda.

🎓 1 — Урок «Промокод можна активувати лише для одного унікального товару» Демонстрація тут https://web4life.ru/one-promo

🚀 2 - Урок «Промокод можна активувати на групу товарів. Наприклад на 3 із 4-х»: Демонстрація тут https://web4life.ru/group-promo

🔍3 — Урок «Промокод можна застосувати якщо в кошику набрано товарів на суму більше або дорівнює X» та «Промокод можна застосувати якщо в кошику набрано товарів на суму більше або дорівнює X, а також у кошику має бути один або кілька певних товарів» Демонстрація тут https://web4life.ru/price-promo/

👜 4 - Урок «Декілька промокодів можна застосувати тільки кожен на свій товар або групу товарів» Демонстрація тут https://web4life.ru/uni-promo

Пишіть https://t.me/vbalakin буду радий допомогти з доопрацюванням.

Відео демонстрація

Останнім часом у коментарях дедалі частіше бачу, що щось не працює.Тому вирішив протестувати свій слайдер для Тільди усередині зероблоку 08.10.2024 р. Як результат, все працює на чистій сторінці, згідно з інструкцією вище. Висновок такий, якщо у вас є проблеми зі слайдером, перевірте спочатку логи через консоль браузера, можливо у вас відбуваються збої в javascript з-за стороннього коду. Якщо ні можете сміливо мені написати в телеграм, буду радий допомогти.