Карусель

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

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

Карусель — это слайд-шоу для циклического просмотра контента, созданного с помощью 3D-преобразований CSS и небольшого количества JavaScript. Он работает с серией изображений, текста или пользовательской разметки. Он также включает поддержку предыдущих/следующих элементов управления и индикаторов.

В браузерах , поддерживающих Page Visibility API , карусель будет избегать скольжения, когда веб-страница не видна пользователю (например, когда вкладка браузера неактивна, окно браузера свернуто и т. д.).

Эффект анимации этого компонента зависит от prefers-reduced-motionмедиа-запроса. См. раздел с ограниченным движением в нашей документации по специальным возможностям .

Имейте в виду, что вложенные карусели не поддерживаются, а карусели, как правило, не соответствуют стандартам доступности.

Наконец, если вы создаете наш JavaScript из исходного кода, для этого требуетсяutil.js .

Пример

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

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

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

Добавление в предыдущий и следующий элементы управления:

<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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

С подписями

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

Метка первого слайда

Nulla vitae elit libero, a pharetra augue mollis interdum.

Метка второго слайда

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Метка третьего слайда

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

Добавьте data-interval=""к a, .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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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="".

Имя	Тип	По умолчанию	Описание
интервал	количество	5000	Количество времени задержки между автоматическим циклом элемента. Если false, карусель не будет автоматически циклироваться.
клавиатура	логический	истинный	Должна ли карусель реагировать на события клавиатуры.
Пауза	строка \| логический	"парить"	Если установлено значение `"hover"`, приостанавливает циклирование карусели `mouseenter`и возобновляет циклическое движение карусели при включении `mouseleave`. Если установлено значение `false`, наведение курсора на карусель не приостановит ее. На устройствах с сенсорным экраном, если установлено значение `"hover"`, цикл будет приостанавливаться `touchend`(после того, как пользователь завершит взаимодействие с каруселью) на два интервала, прежде чем автоматически возобновится. Обратите внимание, что это в дополнение к описанному выше поведению мыши.
поездка	нить	ЛОЖЬ	Автовоспроизведение карусели после того, как пользователь вручную прокрутит первый элемент. Если «карусель», автоматически воспроизводится карусель при загрузке.
сворачивать	логический	истинный	Должна ли карусель вращаться непрерывно или делать резкие остановки.
трогать	логический	истинный	Должна ли карусель поддерживать смахивание влево/вправо на устройствах с сенсорным экраном.

Методы

Асинхронные методы и переходы

Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .

Дополнительную информацию см. в нашей документации по JavaScript .

`.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">).

Тип события	Описание
слайд.бс.карусель	Это событие срабатывает немедленно при `slide`вызове метода экземпляра.
slid.bs.карусель	Это событие запускается, когда карусель завершила переход слайдов.

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

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

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