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

КАК СДЕЛАТЬ СЛАЙДЕР ИЗ ЗЕРО БЛОКОВ В ПОПАП?

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

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

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

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

После того как настроили все слайды, нужно настроить попап, в котором будут показываться слайды:

  • «Ссылка для открытия popup» — Придумайте ссылку для открытия всплывающего окна (попап), а затем укажите ее в кнопке. Важно чтобы ссылка начиналась с символа #. Например, можно использовать ссылку вида "#openpopup".
  • «Класс для закрытия popup» — В этом поле нужно придумать класс, который наоборот закроет вашу попап форму, только класс должен быть без символа #. Например closepopup.

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


  • «Затемнение фона» — Если выбрать пункт "Да", то в генераторе появятся дополнительные поля, в которых можно настроить 2 поля:
  • «Цвет фона» — Цвет затемнения фона;
  • «Непрозрачность» — Непрозрачность: затемнения фона.

  • «Z-index стандартной плашки с ошибкой» — В этом поле нужно настроить z-index для уведомления с ошибкой. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.
  • «Z-index слайдов» — Эта настройка для слайдов / шагов формы. Z-index для слайдов уже настроен по умолчанию, чтобы попап открывался в самом верху слоев и перекрывал другие элементы, поэтому вы можете пропустить данную настройку, если только вы не указали более высокое значение для других блоков. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.

  • «Не блокировать скролл» — При активации данной функции, пользователь сможет прокручивать страницу при открытом попапе.
  • «Не закрывать попап при клике на фон» — Функция помогает если в слайдах есть форма и чтобы попап не закрылся при случайном клике на фон важно включить эту функцию.

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

Имей в виду:
  • В генераторе в поле для табов пишешь просто #bullet, ссылки с нумерацией #bullet1, #bullet2 и т.д. указываешь уже внутри ваших кнопок;
  • Ссылки у табов должны быть во всех блоках. К примеру, у нас 2 слайда, внутри каждого есть 2 кнопки. В обоих слайдах у каждой кнопки прописаны ссылки #bullet1 и #bullet2;
  • Модификация не работает, если внутри слайдов есть элементы «галерея»;
  • Модификация не работает вместе с блоками меню ME602 и ME603.
  • Если нужно добавить ссылку для открытия определенного блока, к кнопке открытия добавь "-номер слайда". Например, чтобы открыть 3й слайд по отдельной кнопке, ссылка будет такой: #open-3
Вариант #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, быстро или медленно;
  • «Включить свайп мышкой на ПК версии» — отмечаешь галочку, если хочешь, чтобы на ПК слайдер листался свайпом;
  • «Отключить свайп на мобилке» — если отметить галочку, то слайды не будут переключаться свайпом, только контроллерами;

После того как настроили все слайды, нужно настроить попап, в котором будут показываться слайды:

  • «Ссылка для открытия popup» — Придумайте ссылку для открытия всплывающего окна (попап), а затем укажите ее в кнопке. Важно чтобы ссылка начиналась с символа #. Например, можно использовать ссылку вида "#openpopup".
  • «Класс для закрытия popup» — В этом поле нужно придумать класс, который наоборот закроет вашу попап форму, только класс должен быть без символа #. Например closepopup.

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


  • «Затемнение фона» — Если выбрать пункт "Да", то в генераторе появятся дополнительные поля, в которых можно настроить 2 поля:
  • «Цвет фона» — Цвет затемнения фона;
  • «Непрозрачность» — Непрозрачность: затемнения фона.

  • «Z-index стандартной плашки с ошибкой» — В этом поле нужно настроить z-index для уведомления с ошибкой. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.
  • «Z-index слайдов» — Эта настройка для слайдов / шагов формы. Z-index для слайдов уже настроен по умолчанию, чтобы попап открывался в самом верху слоев и перекрывал другие элементы, поэтому вы можете пропустить данную настройку, если только вы не указали более высокое значение для других блоков. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.

  • «Не блокировать скролл» — При активации данной функции, пользователь сможет прокручивать страницу при открытом попапе.
  • «Не закрывать попап при клике на фон» — Функция помогает если в слайдах есть форма и чтобы попап не закрылся при случайном клике на фон важно включить эту функцию.


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

Имей в виду:
  • В генераторе в поле для табов пишешь просто #bullet, ссылки с нумерацией #bullet1, #bullet2 и т.д. указываешь уже внутри ваших кнопок;
  • Ссылки у табов должны быть во всех блоках. К примеру, у нас 2 слайда, внутри каждого есть 2 кнопки. В обоих слайдах у каждой кнопки прописаны ссылки #bullet1 и #bullet2;
  • Модификация не работает, если внутри слайдов есть элементы «галерея»;
  • Модификация не работает вместе с блоками меню ME602 и ME603.
  • Если нужно добавить ссылку для открытия определенного блока, к кнопке открытия добавь "-номер слайда". Например, чтобы открыть 3й слайд по отдельной кнопке, ссылка будет такой: #open-3
Вариант #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, быстро или медленно;
  • «Включить свайп мышкой на ПК версии» — отмечаешь галочку, если хочешь, чтобы на ПК слайдер листался свайпом;
  • «Отключить свайп на мобилке» — если отметить галочку, то слайды не будут переключаться свайпом, только контроллерами;

После того как настроили все слайды, нужно настроить попап, в котором будут показываться слайды:

  • «Ссылка для открытия popup» — Придумайте ссылку для открытия всплывающего окна (попап), а затем укажите ее в кнопке. Важно чтобы ссылка начиналась с символа #. Например, можно использовать ссылку вида "#openpopup".
  • «Класс для закрытия popup» — В этом поле нужно придумать класс, который наоборот закроет вашу попап форму, только класс должен быть без символа #. Например closepopup.

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


  • «Затемнение фона» — Если выбрать пункт "Да", то в генераторе появятся дополнительные поля, в которых можно настроить 2 поля:
  • «Цвет фона» — Цвет затемнения фона;
  • «Непрозрачность» — Непрозрачность: затемнения фона.

  • «Z-index стандартной плашки с ошибкой» — В этом поле нужно настроить z-index для уведомления с ошибкой. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.
  • «Z-index слайдов» — Эта настройка для слайдов / шагов формы. Z-index для слайдов уже настроен по умолчанию, чтобы попап открывался в самом верху слоев и перекрывал другие элементы, поэтому вы можете пропустить данную настройку, если только вы не указали более высокое значение для других блоков. Значение для плашки с ошибкой должно быть больше, чем значение для слайдов, чтобы слайды не перекрывали уведомление с ошибкой и пользователь понял, где допустил ошибку.

  • «Не блокировать скролл» — При активации данной функции, пользователь сможет прокручивать страницу при открытом попапе.
  • «Не закрывать попап при клике на фон» — Функция помогает если в слайдах есть форма и чтобы попап не закрылся при случайном клике на фон важно включить эту функцию.

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

Имей в виду:
  • В генераторе в поле для табов пишешь просто #bullet, ссылки с нумерацией #bullet1, #bullet2 и т.д. указываешь уже внутри ваших кнопок;
  • Ссылки у табов должны быть во всех блоках. К примеру, у нас 2 слайда, внутри каждого есть 2 кнопки. В обоих слайдах у каждой кнопки прописаны ссылки #bullet1 и #bullet2;
  • Модификация не работает, если внутри слайдов есть элементы «галерея»;
  • Модификация не работает вместе с блоками меню ME602 и ME603.
  • Если нужно добавить ссылку для открытия определенного блока, к кнопке открытия добавь "-номер слайда". Например, чтобы открыть 3й слайд по отдельной кнопке, ссылка будет такой: #open-3
Код доступен только тем, кто оплатил подписку
Подписка стоит 500р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, чтобы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Слайдер из зеро блоков в попап
Нажмите на кнопку, чтобы открыть всплывающее окно со слайдером из зеро блоков
Approach
Our company works according to the principle
of individual approach to every client. This method allows us to succeed in tasks of any level.
High Quality
We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience. We love what we do.
Good Support
Our managers are always ready to answer your questions. You can call us during the weekends and at night. Also, you can visit our office for a personal consultation.