Слайдер
Слайдер — динамический блок страницы, который показывает несколько элементов контента по очереди. Виджет содержит в себе дочерние элементы с одинаковой структурой.
Этот виджет подойдёт, если нужно добавит сайту интерактивности. Например, слайдер можно использовать для размещения портфолио или отзывов. Пользователь может перелистывать слайды с помощью элементов управления или же слайды могут пролистываться автоматически.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/hPshroSfI6q7DXuWsBnVF_screenshot-2023-09-01-at-131426.png?format=webp)
По умолчанию слайды внутри виджета не содержат в себе элементы. Вы можете добавлять нужные элементы и виджеты на слайд, чтобы настроить его внешний вид.
Вы можете управлять числом слайдов, добавляя их в Настройках виджета Слайдер.
Слайдер состоит из двух частей — Slider Wrapper и Trumbs Wrapper. Slider Wripper включает в себя слои слайдера — каждый слайд и контролы, включая кнопки переключения и пагинацию. Слои Trumbs Wripper — миниатюра слайдера с похожей структурой.
![Структура Слайдера Структура Слайдера](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/DWVri0j21-y6jVNpW2eaM_screenshot-2023-09-08-at-122910.png?format=webp)
По умолчанию миниатюра отключена, вы можете добавить её, нажав на «+» в разделе «Дополнительный виджет» настроек Слайдера.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/l8MIjeWZSrxf9BhLQJvID_screenshot-2023-09-04-at-182920.png?format=webp)
Слайдером можно управлять с помощью параметров, расположенных на вкладке Настройки (Settings) правой панели.
По умолчанию добавлено 3 слайда. Вы можете добавить нужно число слайдов. Также слайды можно удалять или менять местами.
Высоту слайдера определяет высота контекта, вложенного в слайды. Если размеры контента разные, то слайдер адаптируется под самый высокий слайд.
Вы можете включить настройку «Адаптивная высота», таким образом высота каждого слайда будет адаптироваться под его контент.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/qnZYSG6NPntQ0aV8_JRrV_screenshot-2023-09-08-at-171330.png?format=webp)
По аналогии с виджетами Лист (List) и Блоклист (Block List) у Слайдера одинаковая структура у каждого слайда. Вы можете сделать структуру слайдов независимой, включив соответствующую настройку.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/YJLGIQjaMGbklIlsH-x9b_screenshot-2023-09-04-at-182451.png?format=webp)
После включения настройки отменить её не получится. Элементы слайда с независимой структурой можно добавлять, удалять, перемещать, а также скрывать.
Вы можете управлять настройками прокрутки. Для этого задайте:
- Эффект прокрутки — визуальный эффект смены слайдов и её скорость;
Эффект прокрутки описывается с помощью кривых Безье, показывая скорость анимации при смене слайдов. Вы можете выбрать нужный тип из выпадающего списка. По умолчанию используется тип Linear.
- Направление — горизонтальное или вертикальное;
Вертикальное направление смены слайдов будет работать только с Скользящим эффектом прокрутки.
Вы можете отключить листание касанием, а так же задать настройки автоматической смены слайдов.
Для этого включите соответствующую настройку.
![Настройки проигрывания слайдов Настройки проигрывания слайдов](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/9Vrv-XPD9pirB9tD7Dkax_screenshot-2023-09-08-at-161920.png?format=webp)
По умолчанию настройки отключены. Вы можете включить все настройки сразу или выбрать только нужные.
Вы можете скрыть стрелки переключения на первом и последнем слайде и настроить отображение пагинации.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/EmUYKIlgOHgvQMaahdLbV_screenshot-2023-09-08-at-184018.png?format=webp)
По умолчанию пагинация установлена в виде точек, вы можете выбрать нужный формат в выпадающем списке.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/OI6LkMpbcRV2HCt1HZeFj_screenshot2023-09-11at163405.png?format=webp)
Доступны следующие варианты:
- Точки;
- Числа;
- Числа от 01;
- Постранично;
- Отключить пагинацию (нет).
Для управления стилями пагинации, создайте селектор для состояния «Текущий» (Current).
![Селектор текущего слайда: пагинация Селектор текущего слайда: пагинация](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/7Mahr-azUvM1C5cGBdx7I_screenshot-2023-09-11-at-152954.png?format=webp)
Миниатюра слайдера нужна для переключения к определённому слайду. По умолчанию на миниатуру слайдера подтягиваются только изображения.
При клике на изображение на миниатюре, активным станет слайд с соответствующим изображением.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/8BbfgPNtWjIeprwUn4cK2_screenshot-2023-09-11-at-152706.png?format=webp)
В миниатуры автоматически добавлены изображения, которые размещены в Слайдере.
Вы можете добавить миниатуру слайдера, для этого нажмите на «+» в блоке «Дополнительный» на вкладке Настройки.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/7POCsyX_22Mak7IvKB7XZ_screenshot-2023-09-11-at-140347.png?format=webp)
При необходимости внутрь миниатюры можно добавлять элементы и виджеты, которые не содержат ссылку.
С помощью настроек миниатюры задайте её внешний вид. Вы можете выбрать сколько слайдов будет отображено в строке и включить «Слайдер миниатюры».
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/3pk7ZFoC4WFR0jYp4ZBeA_screenshot-2023-09-11-at-164541.png?format=webp)
![Миниатюра слайдера: 4 изображения в ряд Миниатюра слайдера: 4 изображения в ряд](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/_XKovxolO0GFDHis4RTH2_screenshot-2023-09-11-at-165311.png?format=webp)
![Миниатюра слайдера: 2 изображения в ряд Миниатюра слайдера: 2 изображения в ряд](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/CyfxgqOgQDePeD2aczCcE_screenshot-2023-09-11-at-165520.png?format=webp)
Если вы хотите пролистывать миниатюру как слайдер, включите соответсвующую настройку. Так пользователь сможете переключать слайды миниатюры вне зависимости от основного слайдера.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/IqpvmlApJMdqFh42rECf7_screenshot-2023-09-11-at-171043.png?format=webp)