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

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

1. В Зеро-блоке настраиваешь слайдер:

• Внутри Зеро-блока привязываешь классы для кнопок, которые выполняют роль переключения (вперед и назад — например, next и prev).

Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе.

• Если в зеро блоке есть элементы выполняющие роль: табов, нумерации или пагинации, то на каждый элемент указываешь ссылку, как в поле «Ссылка для табов» + порядковый номер, по итогу у нас должно получится, например, 3 элемента с ссылками: #bullet1, #bullet2, #bullet3;
• Дублируешь слайд и меняешь описательный контент или дублируешь настройки во все Зеро-блоки, которые выполняют роль слайдов;

2. Заполняешь следующие поля в генераторе:

• «id блоков через запятую» — копируешь id всех блоков, которые выполняют роль слайдов и указываешь их в данном поле через запятую (например, #rec0001,#rec0002);
• «Проигрывать sbs-анимацию только один раз при переключении» — анимация будет воспроизводиться один раз при первом попадании на слайд, повторно анимация не будет воспроизводиться;
• «Отключить анимацию на первом слайде» — при скроллинге анимация у первого блока будет остановлена, при перелистывании слайдера, она запуститься;
• «Бесконечный слайдер» — например, у вас 3 блока, когда будете нажимать стрелку вперед, слайдер будет переключаться с 3го на 1ый;
• «Пролистывать экран вверх» — в случае, если ваш слайдер занимает один экран, данный пункт можно оставить без изменений;
• «Не воспроизводить видео с начала» при переключении слайдера.

Управляющие элементы — Настрою в зеро блоке

• «Ссылка на кнопку Вперед» — указываешь ссылку, как в Зеро-блоке (например, #next);
• «Ссылка на кнопку Назад» — по аналогии с предыдущим пунктом (например, #prev);
• «Ссылка для табов» — заполняешь данное поле в случае, если в слайдере есть элементы выполняющие роль табов, нумерации или пагинации. Не забываем, что в данном случае необходимо указывать порядковый номер ссылки (например, #bullet1, #bullet2, #bullet3);

Также дополнительно можно настроить следующее:

«Настройки анимации»:

• «Скорость анимации» — выбираешь скорость анимации: 0, быстро или медленно;
• «Автопролистывание (миллисекунды)» — задаешь время смены слайда в миллисекундах;
• «Не автопролистывать, если на слайдер наведена мышка» — отмечаешь галочку, если хочешь, чтобы слайдер останавливался при наведенной на него мышки;
• «Включить свайп мышкой на ПК версии» — отмечаешь галочку, если хочешь, чтобы на ПК слайдер листался свайпом;
• «Отключить автопролистывание на мобилках» — отмечаешь галочку, если хочешь, чтобы на мобилках не было автопролистывания;
• «Отключить свайп на мобилке» — отмечаешь галочку, если хочешь отключить скролл пальцем в мобильной версии.

И последнее, что можно настроить в генераторе: на каких экранах (какой ширины) показывать слайдер — «Выберите на экранах какой ширины нужно показывать слайдер»

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

Имей в виду:

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

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

1. В Зеро-блоке настраиваешь слайдер: создаешь описательный контент, затем дублируешь слайд и меняешь описательный контент;
2. Заполняешь следующие поля в генераторе:

• «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;
• Модификация не работает, если внутри слайдов есть элементы «галерея»;
• Overflow нужно настроить в генераторе;
• Модификация не работает вместе с блоками меню ME602 и ME603.

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

1. В Зеро-блоке настраиваешь слайдер:

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

2. Заполняешь следующие поля в генераторе:

• «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;
• Модификация не работает, если внутри слайдов есть элементы «галерея»;
• Overflow нужно настроить в генераторе;
• Для того чтобы управляющие элементы не пролистывались вместе со слайдером, для параметра «Скорость анимации» нужно выбрать значение «0»;
• Модификация не работает вместе с блоками меню ME602 и ME603.

Как можно использовать модификацию NLM087, собрали примеры тут