Компонент карусель в Bootstrap позволяет добавлять прокручивающиеся изображения и текст, которые появляются, останавливаются, а затем уходят. Элементы управления позволяют пользователю прокручивать вперёд или назад в пределах набора. В целом, это бегущая строка с элементами управления.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="myCarousel" class="carousel slide w-50 ml-auto mr-auto" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="/example/image/27m.jpg" alt="Первый слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/example/image/28m.jpg" alt="Второй слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/example/image/30m.jpg" alt="Третий слайд">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Объяснение
Чтобы создать типовую карусель:
- примените .carousel и .slide к внешнему контейнеру (со своим собственным идентификатором);
- прокручиваемое содержимое поместите в .carousel-inner и присвойте каждому элементу класс .carousel-item;
- кроме того, вы должны применить .active к одному из слайдов в карусели, иначе карусель не будет видна. Данный класс позволяет установить один слайд в качестве начального.
Добавление элементов управления
Чтобы добавить элементы управления «Предыдущий/Следующий», используйте элемент <a> с классом .carousel-control-prev или carousel-control-next. Также добавьте <span> с .carousel-control-prev-icon или .carousel-control-next-icon.
Чтобы нацелиться на программы чтения с экрана, добавьте <span> со словами «Предыдущий» или «Следующий» и присвойте им класс .sr-only. Он скроет текст в браузерах, но оставит доступным для программ чтения с экрана.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="/example/image/30m.jpg" alt="Первый слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/example/image/28m.jpg" alt="Второй слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/example/image/27m.jpg" alt="Третий слайд">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Размеры карусели
Обратите внимание, что в этих примерах я добавил несколько дополнительных классов Bootstrap для изменения размера изображений и центрирования карусели. В частности, я добавил w-50 ml-auto mr-auto к карусели и w-100 к изображениям. Это даёт карусели ширину 50%, а также левый и правый margin как auto. Изображения получают ширину 100% (то есть 100 процентов от ширины карусели).
Когда я так не делаю, элементы управления могут выходить за пределы изображения и становиться невидимыми, потому что ширина изображения уже, чем сама карусель, а элементы управления и фон являются белыми (т. е. белые на белом).
Итак, если вы обнаружили, что не видите элементы управления на карусели, убедитесь, что они не выходят за пределы изображения. В зависимости от изображений и контекста, в котором они отображаются, понадобится изменить размер изображений или карусели.
Добавление индикаторов
Чтобы добавить элемент управления «индикатор» (маленькие кликабельные области внизу по центру), вставьте список с .carousel-indicators, а также соответствующие атрибуты data-target и data-slide-to.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="/example/image/23m.jpg" alt="Первый слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/example/image/22m.jpg" alt="Второй слайд">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/example/image/32m.jpg" alt="Третий слайд">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Подписи
Вы можете включить подписи к своему слайд-шоу, добавив <div> с классом .carousel-caption. Он входит в каждый .carousel-item.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="/example/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="/example/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="/example/image/26m.jpg" alt="Третий слайд">
<div class="carousel-caption">
<h3>Третий слайд</h3>
<p>Это третий слайд.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Bootstrap 4 против Bootstrap 3
Bootstrap 3 использует .item для каждого элемента карусели, Bootstrap 4 использует .carousel-item для каждого элемента карусели.