Карусель

Компонент слайд-шоу для цикличного повторения элементов - карусель изображения или текстовые слайды.

Как это работает

«Карусель» - это слайд-шоу для отображения серии содержимого, созданная на основе CSS 3D-трансформаций и немного на JS. Она работает с текстом, изображениями или обычной разметкой. Она также поддерживает кнопки “next/prev”.

В браузерах с поддержкой API видимости страниц элементы карусели не будут сменяться, когда страница невидима пользователю (например, когда вкладка браузера неактивна, или окно браузера «минимизировано» - кнопка «квадратик» слева от крестика «закрыть браузер», и т.д.).

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

В итоге, если вы используете карусели BS4, это требует подключения util.js.

Пример

Карусель не нормализует автоматически размер содержимого слайдов. Поэтому вам могут понадобиться дополнительные утилиты для придания их содержимому нужного размера. Пока карусели поддерживают кнопки «prev/next», их не надо добавлять явно. Добавьте и настраивайте их самостоятельно.

Класс .active добавляют к одному из слайдов, иначе карусель не будет видно. Также для внедрения элементов управления необходимо задать уникальный ID элементу класса .carousel, особенно если у вас много каруселей на одной странице. Элементы управления и индикаторы должны иметь атрибут data-target (или href для <a>), который совпадает с ID элемента класса .carousel.

Только слайды

Вот пример карусели, где есть только слайды. Заметьте присутствие классов .d-block и .w-100, отменяющих дефолтное выравнивание изображений в браузерах у изображений карусели.

<divid="carouselExampleSlidesOnly"class="carousel slide"data-ride="carousel"><divclass="carousel-inner"><divclass="carousel-item active"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=777&fg=555&text=First slide"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide"alt="Second slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide"alt="Third slide"></div></div></div>

С органами управления

Добавляет кнопки prev/next:

PreviousNext

<divid="carouselExampleControls"class="carousel slide"data-ride="carousel"><divclass="carousel-inner"><divclass="carousel-item active"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=777&fg=555&text=First slide"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide"alt="Second slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide"alt="Third slide"></div></div><aclass="carousel-control-prev"href="#carouselExampleControls"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleControls"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

С индикаторами

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

PreviousNext

<divid="carouselExampleIndicators"class="carousel slide"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#carouselExampleIndicators"data-slide-to="0"class="active"></li><lidata-target="#carouselExampleIndicators"data-slide-to="1"></li><lidata-target="#carouselExampleIndicators"data-slide-to="2"></li></ol><divclass="carousel-inner"><divclass="carousel-item active"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=777&fg=555&text=First slide"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide"alt="Second slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide"alt="Third slide"></div></div><aclass="carousel-control-prev"href="#carouselExampleIndicators"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleIndicators"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

С надписями

Добавляйте надписи в ваши слайды с помощью добавления элемента класса .carousel-caption в любой элемент карусели класса .carousel-item. Надписи легко скрыть на меньших устройствах, используя утилиты отображения. Они спрятаны первоначально с помощью класса .d-none и показываем их опять на средних устройствах с помощью класса .d-md-block.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

PreviousNext

<divclass="carousel-item"><imgsrc="..."alt="..."><divclass="carousel-caption d-none d-md-block"><h5>...</h5><p>...</p></div></div>

Пересечение

Добавьте .carousel-fade в вашу карусель для анимации слайдов с постепенным переходом на следующий слайд.

PreviousNext

<divid="carouselExampleFade"class="carousel slide carousel-fade"data-ride="carousel"><divclass="carousel-inner"><divclass="carousel-item active"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=777&fg=555&text=First slide"alt="First slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide"alt="Second slide"></div><divclass="carousel-item"><imgclass="d-block w-100"src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide"alt="Third slide"></div></div><aclass="carousel-control-prev"href="#carouselExampleFade"role="button"data-slide="prev"><spanclass="carousel-control-prev-icon"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="carousel-control-next"href="#carouselExampleFade"role="button"data-slide="next"><spanclass="carousel-control-next-icon"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>

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

Через атрибуты

Атрибут data-slide принимает значения prev или next, которые изменяют позицию слайда относительно его текущей позиции. Или используйте data-slide-to для перехода на слайд с индексом, например, 2: data-slide-to="2", индексы слайдов начинаются с 0.

Атрибут data-ride="carousel" используется для создания анимации карусели. Его нельзя сочетать с явной инициализацией карусели через JavaScript.

Через JavaScript

Вызывайте карусель вручную:

$('.carousel').carousel()

Параметры

Параметры можно передавать через атрибуты или JavaScript. Для использования атрибутов добавьте название параметра в data-, например: data-interval="".

Методы

.carousel(options)

Инициализирует объект object карусели с установленными параметрами и начинает смену слайдов.

$('.carousel').carousel({interval:2000})

.carousel('cycle')

Сменяет слайды карусели слева направо.

.carousel('pause')

Останавливает смену слайдов.

.carousel(number)

Прокручивает слайды до определенного момента (основано на 0, схоже с рядами). Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).

.carousel('prev')

Прокручивает к предыдущему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).

.carousel('next')

К следующему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).

.carousel('dispose')

Уничтожает карусель элемента.

События

Карусель в Bootstrap располагает 2-мя событиями для применения функциональности. У обоих событий есть следующие дополнительные свойства:

• direction: Направление, в котором движутся слайды ("left" или "right").
• relatedTarget: Элемент DOM, который движется на место «пролистанного» слайда.
• from: Индекс текущего слайда
• to: Индекс следующего слайда

Все события карусели запускаются непосредственно в каруселу (т.е. в <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel',function(){// do something…})

Изменение продолжительности перехода

Длительность перехода .carousel-item можно изменять в переменной Sass $carousel-transition перед компиляцией, или обычным CSS (при использовании компилированного CSS). Если применяются множественные переходы, удостоверьтесь, что переход трансформации задан первым (например: transition: transform 2s ease, opacity .5s ease-out).