Как создать карусель в Bootstrap 5?

div itemprop=»articleBody»>

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

Учебник Bootstrap 5 Carousel

Это руководство охватывает следующие главы:

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

1. Основы компонента Bootstrap 5 Carousel

Карусель Bootstrap 5 использует 3D-преобразование CSS и JavaScript для создания слайд-шоу. Поэтому вы должны включить файлы jQuery и bootstrap.min.js в свой HTML-шаблон для использования компонента карусели. Обратитесь к нашему начальному шаблону Bootstrap 5, чтобы получить формат начального шаблона.
По умолчанию слайды будут вращаться справа налево, и вращение останавливается при наведении курсора мыши.
Слайды в карусели не будут вращаться, если карусель не отображается в браузере. Это работает во всех современных браузерах, использующих API видимости страницы.
Размер слайдов должен быть четко определен.
Используйте класс img-fluid, чтобы карусель работала на всех устройствах.

Во всех примерах, используемых в этом руководстве, мы ограничиваем ширину карусели до 800 пикселей, так как мы использовали ту же ширину для изображения. Ширина ограничивается встроенным стилем путем помещения всей карусели внутри тега

div>.

2. Простая карусель только для слайдов

Это минимальный стиль карусели, в котором автоматически вращаются только изображения слайдов. Код для карусели только со слайдами приведен ниже:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Carousel -->
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
</div>
<!-- End of Carousel -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

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

Карусель начинается с тега , имеющего уникальный идентификатор. В нашем примере #slider — это идентификатор. Тот же должен включать классы «.карусель«а также «.горка”И атрибут data-ride = «карусель».
Затем внутренний тег div с «.carousel-внутренний”И атрибут роль = «список».
Затем еще один div для каждого элемента карусели с классом «.carousel-item«.
Тег img имеет «.d-блок«а также «.img-жидкость”, Чтобы правильно выровнять изображения в браузере.

Примечание: Используйте коды в следующих разделах между началом и концом разделов карусели в приведенном выше простом коде карусели.

3. Карусель с навигационной стрелкой.

Давайте добавим стрелки навигации влево и вправо на слайды карусели.

<div id="arrowslider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#arrowslider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous Slide</span>
</a>
<a class="carousel-control-next" href="#arrowslider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next Slide</span>
</a>
</div>

По сути, вы должны добавить дополнительный код перед внешним тегом

div>, сохраняя все остальные элементы карусели, аналогичные предыдущему примеру слайда. Стрелки навигации основаны на тегах привязки HTML и используют класс «.carousel-control-prev» а также «.carousel-control-next«. Не забудьте включить атрибут href, такой же, как идентификатор основного контейнера карусели, как для предыдущей, так и для следующей стрелки.

Для стрелок «назад» и «вперед» используются два тега span, которые включают значки и текст программы чтения с экрана.

4. Карусель с индикаторами

Третий вариант карусели — добавить индикаторы слайдов внизу по центру изображений. Это поможет перейти к конкретному изображению вместо использования стрелок для перемещения по одному.

<div id="sliderindicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderindicators" data-slide-to="0" class="active"></li>
<li data-target="#sliderindicators" data-slide-to="1"></li>
<li data-target="#sliderindicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
</div>
</div>
<a class="carousel-control-prev" href="#sliderindicators" 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="#sliderindicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

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

ol> использует класс «.carousel-индикаторы”И каждый тег

в списке должен содержать две вещи:

В цель данных атрибут, значение которого должно быть таким же, как у основного идентификатора карусели.
В слайд-данные в с первым значением 0 и увеличенным до 1 и 2 для следующих двух слайдов.

Помните «.active»Включен в первое изображение, чтобы начать карусель на первом слайде. Вы можете сделать любой слайд активным, чтобы начать слайд-шоу с этого слайда.

5. Карусель с субтитрами.

Последний вариант — добавить заголовок и описание к изображениям, как показано ниже:

Код карусели с подписями приведен ниже:

<div id="slidercaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slidercaption" data-slide-to="0" class="active"></li>
<li data-target="#slidercaption" data-slide-to="1"></li>
<li data-target="#slidercaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 1</h3>
<p>Here is short description for slide 1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 2</h3>
<p>Here is short description for slide 2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 3</h3>
<p>Here is short description for slide 3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slidercaption" 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="#slidercaption" 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«. Класс «.d-none»Используется, чтобы скрыть подписи карусели на небольших мобильных устройствах и вернуть их на устройства среднего размера с помощью«.d-md-block«. Вы можете удалить ».d-none» а также».d-md-block”Классы для отображения заголовков слайдеров на всех экранах, включая мобильные устройства. Но убедитесь, что вы используете настраиваемые медиа-запросы CSS для настройки размера шрифта и выравнивания заголовков слайдеров.

6. Параметры управления каруселью

Ниже приведены некоторые элементы управления, которые можно использовать для изменения работы компонента карусели Bootstrap 5.

Название Контроля	Тип	Значение по умолчанию	Краткое описание
интервал данных	номер	5000	Временная задержка в миллисекундах между вращением изображений карусели. Вы можете установить это значение в false, чтобы остановить автоповорот.
клавиатура данных	логический	правда	Истинное значение указывает, что карусель будет реагировать на клавиши клавиатуры и «ложный”Отключит управление с клавиатуры.
пауза данных	нить	«Парить»	Это элемент управления для приостановки ползунка при наведении курсора мыши на событие. Установка значения на «ноль”Не будет останавливать ползунки, а установка наведения будет приостанавливаться при наведении курсора мыши.
передача данных	нить	ложный	Установка значения на «карусель”Включит автовоспроизведение при загрузке. А установка значения «false» запустит режим автовоспроизведения только после того, как пользователь вручную переключит первый элемент.
перенос данных	логический	правда	Решает, что карусель должна зацикливаться непрерывно или иметь жесткие остановки.

Например, добавьте в свой HTML-шаблон приведенный ниже сценарий, чтобы изменить интервал ползунка карусели на 1500 миллисекунд.

<script>
$('.carousel').carousel({
  interval: 1500
})
</script>

Изучите Bootstrap 5 (Индекс)