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;
- Модификация не работает, если внутри слайдов есть элементы «галерея»;
- Модификация не работает вместе с блоками меню ME602 и ME603.