Карусель
Карусель (carousel) показывает несколько слайдов по очереди в одном блоке: картинки, отзывы клиентов, снимки экрана продукта. Слайды листают стрелками, точками внизу или свайпом на телефоне, а при желании они меняются сами.
Слайды и стрелки
Обёртка carousel slide с id, внутри carousel-inner со слайдами carousel-item. Один слайд обязательно отмечен active. Стрелки — кнопки, которые ссылаются на карусель через data-bs-target и говорят, куда листать, через data-bs-slide:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div id="screens" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/media/photo-800x500.jpg" class="d-block w-100" alt="Команда обсуждает задачи">
</div>
<div class="carousel-item">
<div class="bg-primary text-white text-center py-5 fs-3">Списки задач</div>
</div>
<div class="carousel-item">
<div class="bg-success text-white text-center py-5 fs-3">Отчёты за неделю</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#screens" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Назад</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#screens" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Вперёд</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Видна фотография со стрелками по бокам. Нажмите правую стрелку — слайд уедет влево, и появится синий слайд с текстом. В слайд можно положить что угодно, но обычно это картинка с классами d-block w-100.
Индикаторы и подписи
Индикаторы — полоски внизу, по одной на слайд. Они лежат в carousel-indicators, а атрибут data-bs-slide-to задаёт номер слайда с нуля. Подпись к слайду кладут в carousel-caption:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div id="reviews" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#reviews" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Отзыв 1"></button>
<button type="button" data-bs-target="#reviews" data-bs-slide-to="1" aria-label="Отзыв 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img src="/media/photo-800x500.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="fs-5">«Наконец-то все дедлайны в одном месте»</p>
<p>Анна, руководитель проекта</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="/media/photo-800x500.jpg" class="d-block w-100" alt="">
<div class="carousel-caption">
<p class="fs-5">«Перешли за один вечер»</p>
<p>Олег, разработчик</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Отзывы сменяют друг друга каждые 3 секунды: автопрокрутку включает data-bs-ride="carousel", а data-bs-interval задаёт паузу в миллисекундах. Наведите курсор — смена остановится.
Настройки
| Атрибут или класс | Что делает |
|---|---|
data-bs-ride="carousel" | Листать автоматически сразу после загрузки |
data-bs-interval | Пауза перед следующим слайдом, по умолчанию 5000 |
carousel-fade | Слайды не едут, а плавно проявляются |
data-bs-touch="false" | Отключить свайп |
data-bs-theme="dark" | Тёмные стрелки и индикаторы для светлых слайдов |
Частая ошибка
Забыть класс active у первого слайда. Тогда все слайды скрыты, и карусель выглядит как пустое место со стрелками. Ровно один carousel-item должен быть активным, и у индикаторов — тоже ровно один.