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