Слайдер

Содержание

• Структура Слайдера

• Настройки Слайдера

• Управление слайдами

• Настройки пагинации

• Миниатюра слайдера

• Настройки миниатюры

Слайдер — динамический блок страницы, который показывает несколько элементов контента по очереди. Виджет содержит в себе дочерние элементы с одинаковой структурой.

Этот виджет подойдёт, если нужно добавить сайту интерактивности. Например, слайдер можно использовать для размещения портфолио или отзывов. Пользователь может перелистывать слайды с помощью элементов управления или же слайды могут пролистываться автоматически.

По умолчанию слайды внутри виджета не содержат в себе элементы. Вы можете добавлять нужные элементы и виджеты на слайд, чтобы настроить его внешний вид. Вы можете управлять числом слайдов, добавляя их в Настройках виджета Слайдер.

Структура Слайдера

Слайдер состоит из двух частей — Slider Wrapper и Trumbs Wrapper. Slider Wripper включает в себя слои слайдера — каждый слайд и контролы, включая кнопки переключения и пагинацию. Слои Trumbs Wripper — миниатюра слайдера с похожей структурой.

Структура Слайдера

По умолчанию миниатюра отключена, вы можете добавить её, нажав на«+» в разделе «Дополнительный виджет» настроек Слайдера.

Настройки Слайдера

Слайдером можно управлять с помощью параметров, расположенных на вкладке Настройки (Settings) правой панели.

По умолчанию добавлено 3 слайда. Вы можете добавить нужно число слайдов. Также слайды можно удалять или менять местами.

Высоту слайдера определяет высота контента, вложенного в слайды. Если размеры контента разные, то слайдер адаптируется под самый высокий слайд. Вы можете включить настройку «Адаптивная высота», таким образом высота каждого слайда будет адаптироваться под его контент.

По аналогии с виджетами Лист (List) и Блоклист (Block List) у Слайдера одинаковая структура у каждого слайда. Вы можете сделать структуру слайдов независимой, включив соответствующую настройку.

После включения настройки отменить её не получится. Элементы слайда с независимой структурой можно добавлять, удалять, перемещать, а также скрывать.

Управление слайдами

Вы можете управлять настройками прокрутки. Для этого задайте:

Эффект прокрутки — визуальный эффект смены слайдов и её скорость;

Эффект прокрутки описывается с помощью кривых Безье, показывая скорость анимации при смене слайдов. Вы можете выбрать нужный тип из выпадающего списка. По умолчанию используется тип Linear.

Направление — горизонтальное или вертикальное;

Вертикальное направление смены слайдов будет работать только со Скользящим эффектом прокрутки.

Вы можете отключить листание касанием, а так же задать настройки автоматической смены слайдов.

Для этого включите соответствующую настройку.

По умолчанию настройки отключены. Вы можете включить все настройки сразу или выбрать только нужные.

Настройки пагинации

Вы можете скрыть стрелки переключения на первом и последнем слайде и настроить отображение пагинации.

Опция «Скрыть стрелки на первом и последнем слайде» недоступна, если: выбран параметр «Бесконечное повторение слайдов»; выбран эффект прокрутки «Скользящий». В этих случаях чекбокс «Скрыть стрелки на первом и последнем слайде» будет неактивен.

По умолчанию пагинация установлена в виде точек, вы можете выбрать нужный формат в выпадающем списке.

Доступны следующие варианты:

Точки;

Числа;

Числа от 01;

Постранично;

Отключить пагинацию (нет).

Для управления стилями пагинации в активном состоянии, выберите элемент пагинации Dot (Pagination → Bullets → Dot) и добавьте для него состояние Текущий (Current) на вкладке Дизайн.

Миниатюра слайдера

Миниатюра слайдера нужна для переключения к определённому слайду. По умолчанию на миниатюру слайдера подтягиваются только изображения.

При клике на изображение на миниатюре, активным станет слайд с соответствующим изображением.

В миниатюры автоматически добавлены изображения, которые размещены в Слайдере.

Вы можете добавить миниатюру слайдера, для этого нажмите на«+» в блоке «Дополнительный виджет» на вкладке Настройки.

При необходимости внутрь миниатюры можно добавлять элементы и виджеты, которые не содержат ссылку.

Настройки миниатюры

С помощью настроек миниатюры задайте её внешний вид. Вы можете выбрать сколько слайдов будет отображено в строке и включить «Слайдер миниатюры».

Настройки миниатюры

Если вы хотите пролистывать миниатюру как слайдер, включите соответствующую настройку. Так пользователь сможете переключать слайды миниатюры вне зависимости от основного слайдера.

Миниатюры

Нативный виджет «Слайдер» построен на библиотеке Swiper. Если вы создаете собственный слайдер на его основе, избегайте прямого переопределения стилей для классов, содержащих слово swiper. Это может привести к конфликтам стилей.