NLM079 • Время настройки: 3 минуты
Слайдер в Zero Block со своими стрелками, табами и пагинацией
Модификация поможет настроить слайдер из Зеро блоке в Тильда со своими кнопками «Вперед», «Назад» и пагинацией/табами.
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Вставка кода > Подключить jQuery на страницах сайта.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
1/3
2/3
3/3
Смотрите, как быстро установить модификацию
Инструкция
1. В Зеро-блоке настраиваешь слайдер:
2. Заполняешь следующие поля в генераторе:
3. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код;
Имей в виду:
- Внутри Зеро-блока привязываешь ссылки к кнопкам, которые выполняют роль переключения (вперед и назад);
- Если в зеро блоке есть элементы выполняющие роль: табов, нумерации или пагинации, то на каждый элемент указываешь ссылку, как в поле «Ссылка для табов» + порядковый номер, по итогу у нас должно получится, например, 3 элемента с ссылками: #bullet1, #bullet2, #bullet3;
- Дублируешь слайд и меняешь описательный контент или дублируешь настройки во все Зеро-блоки, которые выполняют роль слайдов;
2. Заполняешь следующие поля в генераторе:
- «id блоков через запятую» Копируешь id всех блоков, которые выполняют роль слайдов и указываешь их в данном поле через запятую (например, #rec0001,#rec0002);
- «Ссылка на кнопку Вперед» — Указываешь ссылку, как в Зеро-блоке (например, #next);
- «Ссылка на кнопку Назад» — По аналогии с предыдущим пунктом (например, #prev);
- «Ссылка для табов» — Заполняешь данное поле в случае, если в слайдере есть элементы выполняющие роль табов, нумерации или пагинации. Не забываем, что в данном случае необходимо указывать порядковый номер ссылки (например, #bullet1, #bullet2, #bullet3);
- «Зацикливать перелючение» — Выбираешь подходящий вариант;
- «Пролистывать экран вверх» — В случае, если ваш слайдер занимает один экран, данный пункт можно оставить без изменений.
3. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код;
Имей в виду:
- В генераторе в поле для табов пишешь просто #bullet, ссылки с нумерацией #bullet1, #bullet2 и т. д. указываешь уже внутри ваших кнопок;
- Ссылки у табов должны быть во всех блоках. К примеру, у нас 2 слайда, внутри каждого есть 2 кнопки. В обоих слайдах у каждой кнопки прописаны ссылки #bullet1 и #bullet2;
- Ссылки у кнопок «Вперед» и «Назад» должны быть во всех блоках;
- Если в слайдах элементы сгруппированы, и для них настроена анимация, тогда анимацию необходимо настраивать отдельно для каждого элемента группы, а не для всей группы в целом. Проверь это, если элементы не отображаются при переключении слайдов.
- Автопролистывание слайдов и свайп в мобильной версии можно настроить в модификации NLM087, в данной модификации таких возможностей нет;
- Модификация не работает вместе с блоками меню ME602 и ME603.
Сгенерируйте код для своего сайта
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Слайдер в Zero Block со своими стрелками, табами и пагинацией
Модификация NLM079 подходит, когда слайдер на Тильде уже собран из Zero Block, но стандартное управление не подходит под дизайн. С её помощью можно сделать свои кнопки «вперёд» и «назад», добавить табы, нумерацию или кастомную пагинацию прямо внутри макета.
Такой вариант удобен для экранов с карточками, кейсами, отзывами, тарифами, товарами или презентацией услуги. Каждый слайд остаётся обычным Zero Block, а управление выглядит как часть дизайна страницы, а не как стандартный элемент слайдера.
Такой вариант удобен для экранов с карточками, кейсами, отзывами, тарифами, товарами или презентацией услуги. Каждый слайд остаётся обычным Zero Block, а управление выглядит как часть дизайна страницы, а не как стандартный элемент слайдера.
Когда стоит выбрать эту модификацию
Выбирай NLM079, если главная задача — не автопролистывание, а своя навигация. Например, нужно поставить стрелки в нестандартное место, сделать переключение через табы, добавить номера слайдов или собрать кнопки в стиле интерфейса сайта.
Модификация не навязывает готовый внешний вид. Ты сам собираешь кнопки, табы и другие элементы в Zero Block, а Nolim связывает их с переключением слайдов.
Модификация не навязывает готовый внешний вид. Ты сам собираешь кнопки, табы и другие элементы в Zero Block, а Nolim связывает их с переключением слайдов.
Как устроены стрелки и кнопки
В Zero Block нужно добавить элементы, которые будут работать как кнопки переключения. Для кнопки вперёд указывается одна ссылка, для кнопки назад — другая, например `#next` и `#prev`.
Эти ссылки должны быть прописаны во всех слайдах. Если кнопки есть только в первом блоке, после переключения управление может пропасть или работать нестабильно.
Эти ссылки должны быть прописаны во всех слайдах. Если кнопки есть только в первом блоке, после переключения управление может пропасть или работать нестабильно.
Как работают табы и пагинация
Если вместо стрелок нужны табы, точки или номера слайдов, каждому элементу задаётся ссылка с порядковым номером: например `#bullet1`, `#bullet2`, `#bullet3`. В генераторе при этом указывается базовая ссылка без номера — `#bullet`.
Табы тоже нужно продублировать во всех Zero Block, которые участвуют в слайдере. Тогда пользователь сможет переключаться между слайдами из любого состояния, а активная навигация не будет ломаться при переходе.
Табы тоже нужно продублировать во всех Zero Block, которые участвуют в слайдере. Тогда пользователь сможет переключаться между слайдами из любого состояния, а активная навигация не будет ломаться при переходе.
Как подготовить слайды
Сначала собери первый Zero Block: размести контент, кнопки, табы, изображения и другие элементы. После этого продублируй блок нужное количество раз и замени содержимое каждого слайда.
В генераторе Nolim укажи ID всех Zero Block через запятую, например `#rec0001,#rec0002,#rec0003`. Порядок ID будет порядком слайдов на странице.
В генераторе Nolim укажи ID всех Zero Block через запятую, например `#rec0001,#rec0002,#rec0003`. Порядок ID будет порядком слайдов на странице.
Чем NLM079 отличается от слайдера с автопролистыванием
NLM079 лучше подходит для ручного переключения и кастомной навигации: стрелок, табов, номеров и пагинации. Если нужен слайдер с автопролистыванием, свайпом на мобильной версии и дополнительными настройками поведения, лучше использовать отдельную модификацию для слайдера из Zero Block с автопрокруткой.
Такое разделение помогает выбрать правильное решение под задачу. NLM079 — про управление и навигацию, NLM087 — про карусель, автопролистывание и расширенное поведение слайдера.
Такое разделение помогает выбрать правильное решение под задачу. NLM079 — про управление и навигацию, NLM087 — про карусель, автопролистывание и расширенное поведение слайдера.
Что проверить после установки
После генерации кода вставь HTML-код в блок T123 и опубликуй страницу. Затем проверь, что кнопки вперёд и назад работают на каждом слайде, табы ведут к нужным блокам, а порядок слайдов совпадает с порядком ID в генераторе.
Отдельно проверь сгруппированные элементы и анимации. Если элементы в группе не появляются при переключении, анимацию лучше настроить для каждого элемента отдельно, а не для всей группы.
Отдельно проверь сгруппированные элементы и анимации. Если элементы в группе не появляются при переключении, анимацию лучше настроить для каждого элемента отдельно, а не для всей группы.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Собери слайды в отдельных Zero Block и добавь в каждый блок свои кнопки для переключения. Для кнопки вперёд укажи ссылку вроде `#next`, для кнопки назад — `#prev`, а затем пропиши эти же значения в генераторе Nolim.
Да, в NLM079 можно использовать табы, номера слайдов или кастомные точки пагинации. Внутри Zero Block каждому элементу задаётся ссылка с номером, например `#bullet1`, `#bullet2`, `#bullet3`, а в генераторе указывается базовая ссылка `#bullet`.
Чаще всего ссылки для кнопок или табов прописаны только в одном Zero Block. Чтобы управление работало стабильно, кнопки «вперёд», «назад» и элементы пагинации нужно добавить во все блоки, которые участвуют в слайдере.
Нет, NLM079 рассчитана на слайдер с ручным управлением: своими стрелками, табами, нумерацией или пагинацией. Если нужен слайдер из Zero Block с автопролистыванием, свайпом и расширенными настройками поведения, лучше использовать модификацию NLM087.
Проверь порядок ID блоков в генераторе, ссылки у кнопок, работу табов, зацикливание переключения и поведение на мобильной версии. Если в слайдах есть сгруппированные элементы с анимацией, настрой анимацию отдельно для каждого элемента группы.