Просимо звернути увагу: технічна підтримка 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 на Owl Carousel

Будь ласка, уважно та покроково виконуйте інструкцію, щоб уникнути помилок!

UPD! Додав відео наприкінці статті.

Owl Carousel – один із найпопулярніших плагінів каруселі на jQuery. Якщо у вас виникла потреба розмістити слайдер на вашому веб-сайті Tilda, то це рішення чудово впорається із завданням. Адже в цю карусель ви можете помістити практично будь-який контент. У цій статті я покажу, як перетворити вміст будь-якого Zero block на слайд каруселі.

Приклад каруселі у Zero block

У прикладі я розмістив кілька Zero block з різним наповненням для наочності, щоб було зрозуміліше про що мова.

Як зробити слайдер із Zero Block в Tilda

Створюємо Zero block, усередині якого додамо елемент "shape" і привласнюємо йому css клас нашої каруселі. Shape стане областю, в якій буде розміщено слайдер. Тому при оформленні врахуйте, що цей блок повинен бути на верхньому шарі, а його ширина та висота має вміщувати ваші майбутні слайди.

Додаємо кнопки, якщо вони вам потрібні. Ними може стати будь-який елемент на сторінці, у прикладі я використав 2 іконки svg. Прикріплюємо до кнопок посилання з прикладу.

Створюємо Zero block, який стане слайдом. Додайте вміст і адаптуйте. Вирівнювання елементів має бути відносно window container з позицією left і top (див. зображення), інакше область слайдера не відобразить блок.

Після того, як створили і адаптували перший слайд, можете робити його копії та змінювати контент – це прискорить процес, т.к. елементи копії вже будуть адаптовані, як у вихідному блоці. Якщо використовуєте зображення, відключайте lazy-load у даних елементів, т.к. є шанс, що зображення у прихованих блоках просто не завантажаться.

Додаємо на сторінку блок Т123 і вставляємо код, опубліковувати сторінку – карусель працює. Слідкуйте за коментарями в коді, вони допоможуть не допустити помилок.
Зверніть увагу на адаптив, кількість слайдів у перших 2-х брейкпоінтах Тільди однакова, тому при розміщенні 3-х і більше слайдів адаптуйте розмір елементів відповідно до ширини shape. Калькулятор всім на допомогу:)

Якщо коротко, то послідовність дій така:

1. Копіюємо код на сраницу в блок Т123
2. Створюємо Zero block, у якому буде карусель
3. Замінюємо в коді мій id на id вашого Zero block
4. У блоці створюємо “Shape” та присвоюємо йому css клас anku-slider
5. Додаємо Zero block, який буде слайдом, адаптуємо, створюємо копії, наповнюємо контентом
6. Замінюємо id слайдів у коді на свої;
7. Публікуємо

 /* Додайте висоту слайдів на різних дозволах дисплея */ /* xl */ .anku-slider .t-rec .t396__artboard < width: 100% !important; height: 350px !important; word-break: normal !important; background: transparent !important; >/* lg */ @media screen and (max-width: 1199px) < .anku-slider .t-rec .t396__artboard < height: 310px !important; >> /* md */ @media screen and (max-width: 959px) < .anku-slider .t-rec .t396__artboard < height: 310px !important; >> /* sm */ @media screen and (max-width: 639px) < .anku-slider .t-rec .t396__artboard < height: 350px !important; >> /* @media screen and (max-width: 479px) < .anku-slider .t-rec .t396__artboard < height: 350px !important; >> */ .anku-slider < display: flex; flex-flow: row nowrap; justify-content: center; align-items: stretch; align-content: stretch; >.anku-slider .t-rec, .anku-slider .t396__artboard < overflow: hidden !important; >/* hide filters */ .anku-slider .t-rec .t396__artboard>.t396__carrier, .anku-slider .t-rec .t396__artboard>.t396__filter