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

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.

<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>

Добавьте 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.

<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 предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства:

Все события карусели запускаются в самой карусели (то есть в <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).

Комментарии для сайта Cackle