1. Домашняя страница
  2. JavaScript
  3. Компоненты
  4. Карусель

Карусель

Компонент для циклического просмотра элементов (слайд-шоу)

Превью

Подключение

В случае если компонент поддерживает несколько способов подключения, используйте только тот, который больше подходит для проекта

Внимание!

Перед подключением компонента убедитесь, что все необходимые для требуемого компонента зависимости установлены и подключены!

Используя Bitrix

Для подключения компонента используется стандартный метод для работы с расширениями CJSCore::Init

php

CJSCore::Init(['welpodron.core.carousel']);

Прямое подключение

Для подключения компонента используется комбинация тегов script и link

html

...
Здесь находятся подключение всех стилей, от которого зависит текущий подключаемый скрипт
...
<link rel="stylesheet" href="Путь к локально размещенному файлу стилей компонента">
...
Здесь находятся подключение всех зависимых от данного скрипта стилей
...
</head>

Использование

Компонент работает с помощью специальных HTML атрибутов, не забывайте указывать их в соответствии с документацией перед инициализацией компонента в JavaScript

HTML

Базовый HTML управляемого элемента (основной компонент)

html

<div 
  data-w-carousel
  data-w-carousel-id="COMPONENT_ID"
>
  Содержимое управляемого элемента (основной компонент)
</div>
АтрибутЗначенияОписание
data-w-carousel *-Указатель компонента
data-w-carousel-id *-Идентификатор компонента

Базовый HTML управляемого элемента (дочерний компонент)

html

<div 
  data-w-carousel-id="COMPONENT_ID"
  data-w-carousel-item
  data-w-carousel-item-id="COMPONENT_ITEM_ID"
  [data-w-carousel-item-active]
>
  Содержимое управляемого элемента (дочерний компонент)
</div>
АтрибутЗначенияОписание
data-w-carousel-id *-Идентификатор основного компонента
data-w-carousel-item *-Указатель дочернего компонента
data-w-carousel-item-id *-Идентификатор дочернего компонента
data-w-carousel-item-active-Указатель активности дочернего компонента

Базовый HTML управляющего элемента

html

<button 
  data-w-carousel-control
  [data-w-carousel-control-active]
  data-w-carousel-id="COMPONENT_ID"
  data-w-carousel-action="ONE_OF_SUPPORTED_ACTIONS"
  data-w-carousel-action-args="ARGS_TO_PASS_TO_ACTION"
  [data-w-carousel-action-flush]
>
  Содержимое управляющего элемента
</button>
АтрибутЗначенияОписание
data-w-carousel-control *-Указатель контрола
data-w-carousel-control-active-Указатель активности контрола
data-w-carousel-id *-Идентификатор компонента
data-w-carousel-action *showЭкшен компонента
data-w-carousel-action-args *-Аргументы передаваемые в экшен
data-w-carousel-action-flush-Не использовать event.preventDefault()

JavaScript

Базовая инициализация экземпляра компонента

js

if (window.welpodron && window.welpodron.carousel) {
  const instance = new window.welpodron.carousel({
      element: document.querySelector('[data-w-carousel][data-w-carousel-id="COMPONENT_ID"]');
  })
}

Доступные методы экземпляра компонента welpodron.carousel

async

show(options)

Переключение компонента в видимое состояние

АргументТипОписание
options *{ args?: unknown; event?: Event }Объект с опциями вызова метода

Аккордеон

Сворачиваемый контент