Как сделать слайдер в зеро блоке тильда
Перейти к содержимому

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

  • автор:

Просим обратить внимание: техническая поддержка 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, в редакторе)

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

Приветствую! Подробная текстовая инструкция к видео о том, как сделать не полноэкранный слайдер на 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 шаге

Адаптация под мобильные устройства:

В мобильной версии не поместится вместить две, три и более карточек. Поэтому 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»)

Если остались вопросы или Вы хотите заказать продающий лендинг, то напишите мне в соцсетях или в комментариях под видео.

как сделать СЛАЙДЕР НА ТИЛЬДЕ ИЗ ЗЕРО БЛОКОВ?

В зависимости от выбранного управляющего элемента нужно сделать следующие настройки: если выбрали только стрелки, нужно заполнить поля в «настройки стрелки», если только точки«настройки точек», если стрелки и точки — нужно заполнить и «настройки стрелки», и «настройки точек»

  • Положение стрелок: ←→ Лево право (Растянутые), ↖ Лево Верх (Стрелки рядом), ↗ Право Верх (Стрелки рядом), ↘ Право Низ (Стрелки рядом), ↙ Лево Низ (Стрелки рядом), ↑ Верх (Стрелки рядом), ↓ Низ (Стрелки рядом)
  • Положение стрелок на мобилке: ←→ Лево право (Растянутые), ↖ Лево Верх (Стрелки рядом), ↗ Право Верх (Стрелки рядом), ↘ Право Низ (Стрелки рядом), ↙ Лево Низ (Стрелки рядом), ↑ Верх (Стрелки рядом), ↓ Низ (Стрелки рядом)
  • Размер стрелки (px)
  • Размер стрелки на мобилке (px)
  • Размер кнопки (px)
  • Размер кнопки на мобилке (px)
  • Тип стрелки: Треугольник или Указатель
  • Толщина стрелки (px)
  • Толщина стрелки на мобилке (px)
  • Стрелка: цвет
  • Цвет при наведении
  • Стрелка: цвет фона
  • Цвет фона при наведении
  • Непрозрачность фона
  • Непрозрачность фона при наведении
  • При наведении увеличение
  • Настройка расположения: Window или Grid
  • Показывать обводку
  • Отступ между собой (px)
  • Отступ снизу/сверху (px)
  • Отступ справа/слева (px)
  • Размер активной точки (px)
  • Размер неактивной точки (px)
  • Цвет фона
  • Цвет фона активной точки
  • Толщина обводки (px)
  • Цвет обводки
  • Цвет обводки активной точки
  • Непрозрачность активной точки
  • Непрозрачность неактивной точки
  • Черно-белый фильтр активной точки
  • Черно-белый фильтр неактивной точки
  • Положение точек: ← Лево, → Право, ↑ Верх, ↓ Низ, ↖ Лево Верх, ↗ Право Верх, ↙ Лево Низ, ↘ Право Низ
  • Положение точек на мобилке: ← Лево, → Право, ↑ Верх, ↓ Низ, ↖ Лево Верх, ↗ Право Верх, ↙ Лево Низ, ↘ Право Низ
  • Отступ между собой (px)
  • Направление точек: Горизонтально или Вертикально
  • Отступ снизу/сверху (px)
  • Отступ справа/слева (px)
  • Скрыть на мобилке
  • Добавить миниатюры
  • «Скорость анимации»— выбираешь скорость анимации: 0, быстро или медленно;
  • «Автопролистывание (миллисекунды)»— задаешь время смены слайда в миллисекундах;
  • «Не автопролистывать, если на слайдер наведена мышка»— отмечаешь галочку, если хочешь, чтобы слайдер останавливался при наведенной на него мышки;
  • «Включить свайп мышкой на ПК версии»— отмечаешь галочку, если хочешь, чтобы на ПК слайдер листался свайпом;

3. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код;

  • В генераторе в поле для табов пишешь просто #bullet, ссылки с нумерацией #bullet1, #bullet2 и т.д. указываешь уже внутри ваших кнопок;
  • Ссылки у табов должны быть во всех блоках. К примеру, у нас 2 слайда, внутри каждого есть 2 кнопки. В обоих слайдах у каждой кнопки прописаны ссылки #bullet1 и #bullet2;
  • Модификация не работает, если внутри слайдов есть элементы «галерея»;
  • Модификация не работает вместе с блоками меню ME602 и ME603.

Вариант #3: Управляющие элементы слайдера — и в Зеро блоке, и в модификации

  • Внутри Зеро-блока привязываешь классы для кнопок, которые выполняют роль переключения (вперед и назад — например, #next и #prev);
  • Если в зеро блоке есть элементы выполняющие роль: табов, нумерации или пагинации, то на каждый элемент указываешь ссылку, как в поле «Ссылка для табов» + порядковый номер, по итогу у нас должно получится, например, 3 элемента с ссылками: #bullet1, #bullet2, #bullet3;
  • Дублируешь слайд и меняешь описательный контент или дублируешь настройки во все Зеро-блоки, которые выполняют роль слайдов;
  • «id блоков через запятую» — копируешь id всех блоков, которые выполняют роль слайдов и указываешь их в данном поле через запятую (например, #rec0001,#rec0002);
  • «Проигрывать sbs-анимацию только один раз при переключении»— анимация будет воспроизводиться один раз при первом попадании на слайд, повторно анимация не будет воспроизводиться;
  • «Отключить анимацию на первом слайде» — при скроллинге анимация у первого блока будет остановлена, при перелистывании слайдера, она запуститься;
  • «Бесконечный слайдер» — например, у вас 3 блока, когда будете нажимать стрелку вперед, слайдер будет переключаться с 3го на 1ый;
  • «Пролистывать экран вверх» — в случае, если ваш слайдер занимает один экран, данный пункт можно оставить без изменений.

В зависимости от выбранного управляющего элемента нужно сделать следующие настройки: если выбрали только стрелки, нужно заполнить поля в «настройки стрелки», если только точки«настройки точек», если стрелки и точки — нужно заполнить и «настройки стрелки», и «настройки точек»

  • Положение стрелок: ←→ Лево право (Растянутые), ↖ Лево Верх (Стрелки рядом), ↗ Право Верх (Стрелки рядом), ↘ Право Низ (Стрелки рядом), ↙ Лево Низ (Стрелки рядом), ↑ Верх (Стрелки рядом), ↓ Низ (Стрелки рядом)
  • Положение стрелок на мобилке: ←→ Лево право (Растянутые), ↖ Лево Верх (Стрелки рядом), ↗ Право Верх (Стрелки рядом), ↘ Право Низ (Стрелки рядом), ↙ Лево Низ (Стрелки рядом), ↑ Верх (Стрелки рядом), ↓ Низ (Стрелки рядом)
  • Размер стрелки (px)
  • Размер стрелки на мобилке (px)
  • Размер кнопки (px)
  • Размер кнопки на мобилке (px)
  • Тип стрелки: Треугольник или Указатель
  • Толщина стрелки (px)
  • Толщина стрелки на мобилке (px)
  • Стрелка: цвет
  • Цвет при наведении
  • Стрелка: цвет фона
  • Цвет фона при наведении
  • Непрозрачность фона
  • Непрозрачность фона при наведении
  • При наведении увеличение
  • Настройка расположения: Window или Grid
  • Показывать обводку
  • Отступ между собой (px)
  • Отступ снизу/сверху (px)
  • Отступ справа/слева (px)
  • Размер активной точки (px)
  • Размер неактивной точки (px)
  • Цвет фона
  • Цвет фона активной точки
  • Толщина обводки (px)
  • Цвет обводки
  • Цвет обводки активной точки
  • Непрозрачность активной точки
  • Непрозрачность неактивной точки
  • Черно-белый фильтр активной точки
  • Черно-белый фильтр неактивной точки
  • Положение точек: ← Лево, → Право, ↑ Верх, ↓ Низ, ↖ Лево Верх, ↗ Право Верх, ↙ Лево Низ, ↘ Право Низ
  • Положение точек на мобилке: ← Лево, → Право, ↑ Верх, ↓ Низ, ↖ Лево Верх, ↗ Право Верх, ↙ Лево Низ, ↘ Право Низ
  • Отступ между собой (px)
  • Направление точек: Горизонтально или Вертикально
  • Отступ снизу/сверху (px)
  • Отступ справа/слева (px)
  • Скрыть на мобилке
  • Добавить миниатюры
  • «Скорость анимации»— выбираешь скорость анимации: 0, быстро или медленно;
  • «Автопролистывание (миллисекунды)»— задаешь время смены слайда в миллисекундах;
  • «Не автопролистывать, если на слайдер наведена мышка»— отмечаешь галочку, если хочешь, чтобы слайдер останавливался при наведенной на него мышки;
  • «Включить свайп мышкой на ПК версии»— отмечаешь галочку, если хочешь, чтобы на ПК слайдер листался свайпом;

3. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код;

  • В генераторе в поле для табов пишешь просто #bullet, ссылки с нумерацией #bullet1, #bullet2 и т.д. указываешь уже внутри ваших кнопок;
  • Ссылки у табов должны быть во всех блоках. К примеру, у нас 2 слайда, внутри каждого есть 2 кнопки. В обоих слайдах у каждой кнопки прописаны ссылки #bullet1 и #bullet2;
  • Модификация не работает, если внутри слайдов есть элементы «галерея»;
  • Модификация не работает вместе с блоками меню ME602 и ME603.

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

Подробная видеоинструкция по настройке модификации. Обращаем ваше внимание на то, что в видео может использоваться устаревший интерфейс.

Инструкция (Развернуть↓)

  • Внутри Зеро-блока привязываешь ссылки к кнопкам, которые выполняют роль переключения (вперед и назад);
  • Если в зеро блоке есть элементы выполняющие роль: табов, нумерации или пагинации, то на каждый элемент указываешь ссылку, как в поле «Ссылка для табов» + порядковый номер, по итогу у нас должно получится, например, 3 элемента с ссылками: #bullet1, #bullet2, #bullet3;
  • Дублируешь слайд и меняешь описательный контент или дублируешь настройки во все Зеро-блоки, которые выполняют роль слайдов;
  • «id блоков через запятую» Копируешь id всех блоков, которые выполняют роль слайдов и указываешь их в данном поле через запятую (например, #rec0001,#rec0002);
  • «Ссылка на кнопку Вперед» – Указываешь ссылку, как в Зеро-блоке (например, #next);
  • «Ссылка на кнопку Назад» – По аналогии с предыдущим пунктом (например, #prev);
  • «Ссылка для табов» – Заполняешь данное поле в случае, если в слайдере есть элементы выполняющие роль табов, нумерации или пагинации. Не забываем, что в данном случае необходимо указывать порядковый номер ссылки (например, #bullet1, #bullet2, #bullet3);
  • «Зацикливать перелючение» – Выбираешь подходящий вариант;
  • «Пролистывать экран вверх» – В случае, если ваш слайдер занимает один экран, данный пункт можно оставить без изменений.

Имей в виду:

  • В генераторе в поле для табов пишешь просто #bullet, ссылки с нумерацией #bullet1, #bullet2 и т.д. указываешь уже внутри ваших кнопок;
  • Ссылки у табов должны быть во всех блоках. К примеру, у нас 2 слайда, внутри каждого есть 2 кнопки. В обоих слайдах у каждой кнопки прописаны ссылки #bullet1 и #bullet2;
  • Модификация не работает вместе с блоками меню ME602 и ME603;
  • Автопролистывание слайдов можно настроить вмодификацииNLM087, в данной модификации такой возможности, к сожалению, нет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *