Перейти к основному содержимому

welpodron.carousel

Карусель

<button
  data-action="slide"
  data-carousel-id="carousel_example"
  data-args="0"
  type="button"
>
  <b>(carousel.control)</b> <b>(slide)</b> <b>(0)</b> Показать элемент 0
</button>
<button
  data-action="slide"
  data-carousel-id="carousel_example"
  data-args="1"
  type="button"
>
  <b>(carousel.control)</b> <b>(slide)</b> <b>(1)</b> Показать элемент 1
</button>
<button
  data-action="slide"
  data-carousel-id="carousel_example"
  data-args="2"
  type="button"
>
  <b>(carousel.control)</b> <b>(slide)</b> <b>(2)</b> Показать элемент 2
</button>
<div id="carousel_example" data-carousel>
  <div data-active data-carousel-item>
    <p>
      <b>(carousel.item)</b>. Данный элемент имеет порядковый номер: <b>0</b>.
      Это некий заполнитель для элемента карусели, который располагается строго
      внутри <b>(carousel)</b>. По умолчанию он скрыт. Однако, если ему добавить
      атрибут <b>(data-active)</b> то он будет открыт. Чтобы показать элемент
      карусели можно воспользоваться следующими <b>(data-action)</b> у
      <b>(carousel.control)</b>: <b>(slide)</b> с <b>(args)</b> равным
      порядковому номеру элемента карусели.
    </p>
  </div>
  <div data-carousel-item>
    <p>
      <b>(carousel.item)</b>. Данный элемент имеет порядковый номер: <b>1</b>.
      Это некий заполнитель для элемента карусели, который располагается строго
      внутри <b>(carousel)</b>. По умолчанию он скрыт. Однако, если ему добавить
      атрибут <b>(data-active)</b> то он будет открыт. Чтобы показать элемент
      карусели можно воспользоваться следующими <b>(data-action)</b> у
      <b>(carousel.control)</b>: <b>(slide)</b> с <b>(args)</b> равным
      порядковому номеру элемента карусели.
    </p>
  </div>
  <div data-carousel-item>
    <p>
      <b>(carousel.item)</b>. Данный элемент имеет порядковый номер: <b>2</b>.
      Это некий заполнитель для элемента карусели, который располагается строго
      внутри <b>(carousel)</b>. По умолчанию он скрыт. Однако, если ему добавить
      атрибут <b>(data-active)</b> то он будет открыт. Чтобы показать элемент
      карусели можно воспользоваться следующими <b>(data-action)</b> у
      <b>(carousel.control)</b>: <b>(slide)</b> с <b>(args)</b> равным
      порядковому номеру элемента карусели.
    </p>
  </div>
</div>
<button
  data-action="slide"
  data-carousel-id="carousel_example"
  data-args="prev"
  type="button"
>
  <b>(carousel.control)</b> <b>(slide)</b> <b>(prev)</b> Показать предыдущий
  элемент (зациклено)
</button>
<button
  data-action="slide"
  data-carousel-id="carousel_example"
  data-args="next"
  type="button"
>
  <b>(carousel.control)</b> <b>(slide)</b> <b>(next)</b> Показать следующий
  элемент (зациклено)
</button>

Установка / Подключение​

Список PHP библиотек:

  • welpodron.core

Список зависимостей:

Внимание

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

Установка и подключение компонента происходит в соответствии с документацией

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

Использование через HTML​

html
<div id="carousel_example" data-carousel>
  Это carousel ...
  <div [data-active] data-carousel-item>Это 0 carousel.item ...</div>
  <div [data-active] data-carousel-item>Это 1 carousel.item ...</div>
  ...
  <div [data-active] data-carousel-item>Это {N} carousel.item ...</div>
  ...
</div>
...
<div
  data-carousel-id="carousel_example"
  data-action="slide"
  data-args="[prev] [next] [0-{N}]"
>
  Это carousel.control для carousel.item указанного в data-args ...
</div>
...

HTML атрибуты​

  • Атрибут: id
    • Описание: Уникальный идентификатор компонента
    • Обязателен: Да
  • Атрибут: data-carousel
    • Описание: Указатель компонента
    • Обязателен: Да

carousel.item​

Располагается строго внутри carousel

  • Атрибут: data-carousel-item
    • Описание: Указатель принадлежности к компоненту carousel
    • Обязателен: Да*

* - в случае если атрибут data-carousel-item не будет указан, тег, лежащий внутри тега с атрибутом carousel, не будет восприниматься как элемент carousel

  • Атрибут: data-active
    • Описание: Указатель активности текущего элемента
    • Обязателен: Нет**

** - в случае если атрибут data-active не будет указан ни одному data-carousel-item - активным элементом станет первый найденный data-carousel-item, лежащий внутри carousel

carousel.control​

  • Атрибут: data-carousel-id
    • Описание: Идентификатор carousel
    • Обязателен: Да
    • Возможные значения: Значение атрибута id у carousel
  • Атрибут: data-action
    • Описание: Экшн компонента
    • Обязателен: Да
    • Возможные значения:
      • slide
        • Описание: Показать элемент имеющий порядковый номер указанный в data-args
        • Возможные значения аргументов data-args:
          • prev - предыдущий carousel.item к текущему активному carousel.item (переход зациклен от конца к начала от начала к концу)
          • next - следующий carousel.item к текущему активному carousel.item (переход зациклен от конца к начала от начала к концу)
          • Любое число от 0 до {N}, обозначающее порядковый номер элемента carousel.item (нумерация элементов начинается с 0)