Карусель

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

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

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

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

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

Наконец, если вы создаете наш 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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

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

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

Предыдущий Следующий

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Кроссфейд

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

Предыдущий Следующий

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

Применение

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

Используйте атрибуты данных, чтобы легко управлять положением карусели. data-slideпринимает ключевые слова prevили next, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы используйте data-slide-toдля передачи необработанного индекса слайда в карусель 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 предоставляет два события для подключения к функциям карусели. Оба события имеют следующие дополнительные свойства:

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

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

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

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

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