Loading...
Скачать расширение
Поддержка
Поддержка
Модификации
Промпты
ИИ-инструменты
База знаний
Профиль
Подписка
Партнерка
Блог
Шаблоны
....
NLM087 • Время настройки: 3 минуты

Слайдер из Zero Block на Тильде

Модификация поможет настроить анимацию автоматической смены слайдов из Зеро блоков, свои стрелки, свою пагинацию или можно использовать стандартные элементы управления.

Посмотрите, как будет выглядеть модификация на вашем сайте.

Дизайн настраиваете сами — наша модификация добавит нужный эффект.

Смотрите, как быстро установить модификацию

Инструкция

Вариант #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.

Сгенерируйте код для своего сайта

Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Слайдер из Zero Block на Тильде — карусель из отдельных блоков

Модификация NLM087 помогает сделать слайдер из отдельных Zero Block. Каждый блок становится самостоятельным слайдом, поэтому внутри можно собрать любой дизайн: обложку, карточку услуги, кейс, отзыв, тариф, товарную подборку или презентационный экран.

Такой слайдер подходит, когда стандартного блока Тильды недостаточно. Ты не ограничен готовой сеткой: можно управлять композицией, адаптивами, анимацией, кнопками, фоном и любыми элементами внутри каждого слайда.

Чем слайдер из Zero Block отличается от стандартного слайдера Тильды

В стандартном слайдере Тильды структура уже задана: есть готовые места для изображения, текста, кнопок и навигации. Это удобно для простых задач, но мешает, когда нужен нестандартный макет.

В слайдере из Zero Block каждый слайд собирается вручную. Можно сделать разные композиции, поставить элементы в нужные места, настроить адаптивы и сохранить визуальный стиль страницы без компромиссов.

Когда стоит использовать NLM087

NLM087 лучше выбирать, если нужен именно слайдер из отдельных Zero Block, а не просто замена стрелок или точек. Например, для блока с кейсами, экранов с тарифами, карточек продуктов, портфолио, отзывов, этапов работы или длинной презентации внутри одной секции.

Модификация помогает собрать карусель с автопролистыванием, свайпом, бесконечным переключением, своими или стандартными элементами управления. При этом слайды остаются полноценными Zero Block, а не обычными карточками стандартного блока.

Как подготовить слайды

Сначала собери первый Zero Block как полноценный слайд: добавь текст, изображения, кнопки, иконки, фон, карточки и другие элементы. После этого продублируй блок нужное количество раз и замени контент на каждом слайде.

В генераторе Nolim нужно указать ID всех блоков через запятую, например `#rec0001,#rec0002,#rec0003`. Порядок ID в этом поле будет порядком слайдов в карусели.

Как настроить управление слайдером

Управление можно собрать двумя способами. Первый вариант — сделать кнопки, табы или пагинацию прямо в Zero Block. Тогда для кнопок вперёд и назад задаются CSS-классы, а для табов или точек используются ссылки вида `#bullet1`, `#bullet2`, `#bullet3`.

Второй вариант — включить управляющие элементы из самой модификации. Можно выбрать стрелки, точки или стрелки вместе с точками, а затем настроить их размер, положение, цвет и поведение на разных разрешениях.

Автопролистывание, свайп и бесконечный слайдер

В NLM087 можно включить автопролистывание и задать время смены слайда в миллисекундах. Также можно остановить автопролистывание при наведении мыши, включить свайп на ПК и отдельно настроить поведение на мобильной версии.

Если слайдов несколько, можно включить бесконечное переключение. Тогда после последнего слайда карусель снова откроет первый, и пользователь не упрётся в конец блока.

Как работает SBS-анимация в слайдах

Если внутри Zero Block настроена SBS-анимация, её можно запускать при переключении слайдов. В генераторе есть настройка, чтобы анимация проигрывалась только один раз при первом попадании на слайд.

Также можно отключить анимацию на первом слайде при загрузке страницы. Это удобно, если первый экран должен открываться спокойно, а движение нужно показывать уже при перелистывании.

Чем NLM087 отличается от NLM079

NLM087 — основная модификация для слайдера из Zero Block с автопролистыванием, свайпом, бесконечным переключением и расширенными настройками поведения. Её стоит использовать, когда нужен полноценный слайдер или карусель из отдельных блоков.

NLM079 лучше подходит для другого сценария: когда уже нужен слайдер со своими стрелками, табами, нумерацией или кастомной пагинацией. Если задача в первую очередь про навигацию, можно использовать NLM079; если нужен слайдер из Zero Block с автопрокруткой и поведением карусели — выбирай NLM087.

Что проверить после установки

После настройки скопируй HTML-код из генератора, вставь его в блок T123 и опубликуй страницу. Проверь порядок слайдов, работу стрелок и точек, автопролистывание, свайп, бесконечное переключение и ссылки внутри каждого слайда.

Отдельно проверь мобильную версию. Иногда на телефоне лучше отключить автопролистывание или свайп, если внутри слайдов есть кнопки, формы, ссылки или другие элементы, по которым пользователь должен спокойно нажимать.

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

Создай несколько Zero Block, где каждый блок будет отдельным слайдом, а затем укажи их ID в генераторе NLM087 через запятую. После этого скопируй HTML-код из генератора, вставь его в блок T123 и опубликуй страницу.

Не нашли свой вопрос?

Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.

Есть идеи по улучшению этой модификации или созданию новой?

Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.

Не забудь подписаться, чтобы быть в курсе последних обновлений.