Loading...
О НАС
КЛИЕНТАМ
ПАРТНЁРАМ
СЛЕДИТЕ ЗА НАМИ
ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:
Nolim Academy
Расширение
Онлайн-чат
Академия
Расширение
Техподдержка
Расширение
Онлайн-чат
Nolim Academy
Модификации
Профиль
Подписка
Партнерская программа
Блог
Шаблоны
NLM087 ВРЕМЯ НАСТРОЙКИ: 3 МИНУТЫ

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

Модификация поможет настроить анимацию автоматической смены слайдов из Зеро блоков, свои стрелки, свою пагинацию или можно использовать стандартные элементы управления.
Вариант #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 нужно настроить в генераторе;
  • Модификация не работает вместе с блоками меню ME602 и ME603.
Как можно использовать модификацию NLM087, собрали примеры тут
Поддержка без выходных
Бесплатный доступ
0₽
/месяц
Доступен ограниченный функционал
Плагин для Тильды
Закрытые эфиры
+140 модификаций
Скидка 25% на курсы
Обновление модификаций и доступ к новым
+120 модификаций
Скидка 25% на курсы
Обновление модификаций и доступ к новым
Базовая
500₽
/месяц
Для решения краткосрочных задач
Год
Месяц
Плагин для Тильды
Поддержка без выходных
Закрытые эфиры
чтобы скопировать код, ОФОРМИТЕ ПОДПИСКУ или ВОЙДИТЕ в личный кабинет
Плагин для Тильды
Поддержка без выходных
+140 модификаций
Премиум
250₽
/месяц
Экономия 3000₽ в год
Год
Месяц
Скидка 25% на курсы
Обновление модификаций и доступ к новым
Закрытые эфиры
Все пользователи, оформившие Премиум-подписку, получают доступ к дополнительным разделам: «Интернет-магазин» и «Личный кабинет».

В этих разделах представлены различные модификации, которые не доступны тем, кто оформил месячную подписку.
Все пользователи, оформившие Премиум-подписку, могут воспользоваться 25% скидкой на все курсы и гайды Академии Нолим.
Все пользователи, оформившие Премиум-подписку, могут посещать закрытые мероприятия, на которые мы приглашаем ведущих экспертов рынка.

На этих встречах они делятся своим опытом, что открывает новые горизонты для всех участников.
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, чтобы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям