Карусель Bootstrap 4

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

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

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

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

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

Пример

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

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

Задавайте уникальный id классу .carousel для возможности гибкого управления, особенно если вы используете много каруселей на странице.

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

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

С элементами управления

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

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

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

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

С надписями

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

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Склейка (плавный переход)

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

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Индивидуальный интервал .carousel-item

Добавьте data-interval="" к элементу .carousel-item, чтобы изменить время задержки между автоматическим циклическим переходом к следующему элементу.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Отключенный сенсорный свайпинг

Карусели поддерживают смахивание влево/вправо на устройствах с сенсорным экраном для перемещения между слайдами. Это можно отключить с помощью атрибута data-bs-touch. Пример ниже также не включает атрибут data-bs-ride и имеет data-bs-interval="false", поэтому он не запускается автоматически.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

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

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

Атрибут data-ride="carousel" используется для пометки карусели как анимированной, начиная с загрузки страницы. Если Вы не используете 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')

Разрушает карусель элемента.

.carousel('nextWhenVisible')

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

.carousel('to')

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

События

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

• 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).