Как создать карусель в 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 (Индекс)