Элементы и виджеты

Слайдер

14min

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

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

Document image


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

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

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

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

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


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

Document image


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

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

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

Высоту слайдера определяет высота контента, вложенного в слайды. Если размеры контента разные, то слайдер адаптируется под самый высокий слайд.

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

Document image


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

Document image


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

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

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

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

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

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

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

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

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

Настройки проигрывания слайдов
Настройки проигрывания слайдов


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

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

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

Document image


Опция «Скрыть стрелки на первом и последнем слайде» недоступна, если:

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

В этих случаях чекбокс «Скрыть стрелки на первом и последнем слайде» будет неактивен.

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

Document image


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

  • Точки;
  • Числа;
  • Числа от 01;
  • Постранично;
  • Отключить пагинацию (нет).

Для управления стилями пагинации, создайте селектор для состояния «Текущий» (Current).

Селектор текущего слайда: пагинация
Селектор текущего слайда: пагинация


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

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

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

Document image


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

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

Document image


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

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

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

Document image

Миниатюра слайдера: 4 изображения в ряд
Миниатюра слайдера: 4 изображения в ряд

Миниатюра слайдера: 2 изображения в ряд
Миниатюра слайдера: 2 изображения в ряд


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

Document image




Updated 29 Oct 2024
Did this page help you?