Carousel

Как это устроено

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

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

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

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

Примеры

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

В .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="visually-hidden">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="visually-hidden">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="visually-hidden">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="visually-hidden">Next</span>
  </a>
</div>

С подписями

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

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

Nulla vitae elit libero, pharetra augue mollis interdum.

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

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

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

Praesentmodo cursus magna, vel scelerisque nisl conctetur.

<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="visually-hidden">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="visually-hidden">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="visually-hidden">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="visually-hidden">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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="visually-hidden">Next</span>
  </a>
</div>

Темный вариант

Добавить .carousel-dark к .carousel для более темных элементов управления, индикаторов и титров. Элементы управления были инвертированы по сравнению с их белой заливкой по умолчанию с filter помощью свойства CSS. Заголовки и элементы управления имеют дополнительные переменные Sass, которые настраивают color и background-color.

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

Nulla vitae elit libero, pharetra augue mollis interdum.

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

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

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

Praesentmodo cursus magna, vel scelerisque nisl conctetur.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleDark" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleDark" data-slide-to="1"></li>
    <li data-target="#carouselExampleDark" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <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" data-interval="2000">
      <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="#carouselExampleDark" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

Применение

Через атрибуты данных

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

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

Через JavaScript

Вызов карусели вручную с помощью:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Параметры

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

имя	Тип	По умолчанию	Описание
`interval`	количество	`5000`	Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
`keyboard`	логический	`true`	Должна ли карусель реагировать на события клавиатуры.
`pause`	строка \| логический	`"hover"`	Если установлено значение `"hover"`, приостанавливает цикл включения карусели `mouseenter`и возобновляет цикл включенной карусели `mouseleave`. Если установлено значение `false`, наведение курсора на карусель не приводит к остановке. На устройствах с сенсорным экраном, когда установлено значение `"hover"`, цикл будет приостановлен `touchend`(после того, как пользователь закончит взаимодействие с каруселью) на два интервала, а затем автоматически возобновится. Обратите внимание, что это в дополнение к описанному выше поведению мыши.
`slide`	строка \| логический	`false`	Автоматически отображает карусель после того, как пользователь вручную перебирает первый элемент. Если "карусель", автоматически воспроизводит карусель при загрузке.
`wrap`	логический	`true`	Должна ли карусель работать непрерывно или иметь жесткие остановки.
`touch`	логический	`true`	Должна ли карусель поддерживать взаимодействие смахивания влево / вправо на устройствах с сенсорным экраном.

Методы

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

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

См. документацию по JavaScript для получения дополнительной информации.

Вы можете создать экземпляр карусели с помощью конструктора карусели, например, для инициализации с дополнительными параметрами и начала циклического перебора элементов:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, { 
  interval: 2000,
  wrap: false
})

Метод	Описание
`cycle`	Перебирает элементы карусели слева направо.
`pause`	Останавливает карусель от циклического перебора элементов.
`prev`	Переход к предыдущему элементу. Возврат к вызывающей стороне до того, как будет показан предыдущий элемент (например, до того, как `slid.bs.carousel`произойдет событие).
`next`	Переход к следующему элементу. Возврат к вызывающему абоненту до того, как будет показан следующий элемент (например, до того, как `slid.bs.carousel`произойдет событие).
`nextWhenVisible`	Циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву). Возврат к вызывающей стороне до того, как будет показан целевой элемент (например, до того, как `slid.bs.carousel`произойдет событие).
`dispose`	Уничтожает карусель элемента.
`getInstance`	Статический метод, позволяющий получить экземпляр карусели, связанный с элементом DOM.

События

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

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

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

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

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () { 
  // do something...
})

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

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