Bootstrap 4 Carousel
Bootstrap 4 Карусель
Карусель представляет собой слайд-шоу для велоспорта через элементы.
Как создать Карусель
В следующем примере показано, как создать базовую карусель с индикаторами и элементами управления:
Пример
<div id="demo" class="carousel slide" data-ride="carousel">
<!--
Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li
data-target="#demo" data-slide-to="2"></li>
</ul>
<!--
The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg"
alt="Los Angeles">
</div>
<div
class="carousel-item">
<img src="chicago.jpg"
alt="Chicago">
</div>
<div
class="carousel-item">
<img src="ny.jpg"
alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev"
href="#demo" data-slide="prev">
<span
class="carousel-control-prev-icon"></span>
</a>
<a
class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Пример объяснено
Описание того, что делает каждый класс из приведенного выше примера:
| Класс | Описание |
|---|---|
| .carousel | Создает Карусель |
| .carousel-indicators | Добавляет индикаторы для карусели. Это маленькие точки в нижней части каждого слайда (который показывает, сколько слайдов есть в карусели, и какой слайд пользователь в настоящее время просмотра) |
| .carousel-inner | Добавление слайдов в Карусель |
| .carousel-item | Задает содержимое каждого слайда |
| carousel-control-prev | Добавляет левую (предыдущую) кнопку к карусели, которая позволяет пользователю вернуться между слайдами |
| carousel-control-next | Добавляет кнопку вправо (Next) к карусели, которая позволяет пользователю идти вперед между слайдами |
| carousel-control-prev-icon | Используется вместе с. Карусель-управление-Предыдущая для создания "предыдущей" кнопки |
| carousel-control-next-icon | Используется вместе с. Карусель-управление-Next для создания кнопки "Next" |
| .slide | Добавляет CSS переход и эффект анимации при скольжении от одного элемента к следующему. Удалите этот класс, если вы не хотите, чтобы этот эффект |
Добавление подписей к слайдам
Los Angeles
We had such a great time in LA!
Chicago
Thank you, Chicago!
New York
We love the Big Apple!
Добавьте элементы внутри <div class="carousel-caption"> каждого из них <div
class="carousel-item">, чтобы создать заголовок для каждого слайда:
Пример
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los
Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
Полный справочник по загрузочной карусели
Для полной справки всех вариантов карусели, методы и события, перейдите на наш Ссылка Bootstrap JS Карусель.