Карусель — это компонент Bootstrap, он позволяет добавить перелистывающие изображения с текстом, которые появляются, приостанавливаются, а затем исчезают. Элементы управления позволяют пользователю прокручивать изображения вперёд или назад в пределах набора. По сути, это прокручивающаяся область с элементами управления.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div id="myCarousel" class="carousel slide w-50 ms-auto me-auto" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="image/27m.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/28m.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/30m.jpg" alt="Third slide">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Пояснение
Для создания базовой карусели:
- Примените .carousel и .slide к внешнему контейнеру (с собственным идентификатором).
- Для прокручиваемого содержимого оберните все элементы в .carousel-inner и присвойте каждому элементу класс .carousel-item.
- Также необходимо применить .active к одному из слайдов карусели, иначе карусель не будет видна. Этот класс позволяет вам установить один слайд в качестве начального (иными словами, стартового слайда).
- Для автоматического запуска карусели используйте атрибут .data-bs-ride.
Добавление элементов управления
Чтобы добавить элементы управления «Предыдущий/Следующий», используйте <a> с .carousel-control-prev или carousel-control-next. Ещё добавьте <span> с .carousel-control-prev-icon или .carousel-control-next-icon.
Также добавьте .data-bs-target для каждого элемента управления с идентификатором карусели, которой он управляет.
Чтобы обеспечить работу с экранными читалками, добавьте <span> со словами «Предыдущий» или «Следующий» и присвойте им класс .visually-hidden. Это скроет этот текст от браузеров, но зачитает его в экранных читалках.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div id="myCarousel" class="carousel slide bg-inverse w-50 ms-auto me-auto" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="image/30m.jpg" alt="Первый слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/28m.jpg" alt="Второй слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/27m.jpg" alt="Третий слайд">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Размеры карусели
Обратите внимание, что в этих примерах я добавил несколько дополнительных классов Bootstrap для изменения размера изображений и выравнивания карусели по центру.
В частности, я добавил w-50 ms-auto me-auto к карусели и w-100 к изображениям. Это дает карусели ширину 50%, а margin-left и margin-right равный auto. Изображения получают ширину 100% (иными словами 100 процентов от ширины карусели).
Если я этого не делаю, элементы управления могут выходить за пределы изображения и становиться невидимыми из-за того, что ширина изображения меньше ширины самой карусели, а элементы управления и фон оба белые (получается белое на белом).
Поэтому, если вы обнаружили, что элементы управления на карусели не видны, проверьте, не выходят ли они за пределы изображения. Нужно ли вам изменять размер изображения и/или карусели, зависит от ваших изображений и контекста, в котором они отображаются.
Добавление индикаторов
Чтобы добавить «индикаторы» (маленькие кликабельные области внизу по центру), добавьте список с .carousel-indicators, а также соответствующие атрибуты .data-bs-target и .data-bs-slide-to.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div id="myCarousel" class="carousel slide bg-inverse w-50 ms-auto me-auto" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="image/23m.jpg" alt="Первый слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/22m.jpg" alt="Второй слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/32m.jpg" alt="Третий слайд">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Подписи
Вы можете указать подписи к своему слайд-шоу, добавив <div> с классом .carousel-caption. Это делается внутри каждого элемента .carousel.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div id="myCarousel" class="carousel slide bg-inverse w-50 ms-auto me-auto" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="image/23m.jpg" alt="Первый слайд">
<div class="carousel-caption">
<h3>Первый слайд</h3>
<p>Это первый слайд.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/22m.jpg" alt="Второй слайд">
<div class="carousel-caption">
<h3>Второй слайд</h3>
<p>Это второй слайд.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/32m.jpg" alt="Третий слайд">
<div class="carousel-caption">
<h3>Третий слайд</h3>
<p>Это третий слайд.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
Bootstrap 5 включает в себя гораздо больше функций, чем я описал в своём руководстве. Дополнительную информацию смотрите в документации Bootstrap.