<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<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="h1-hero.png" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="h1_hero.png" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="assets/img/banner/about_banner.png" alt="New York" width="1100" height="500">
</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>
</body>
</html>
где:
width и height это ширина и высота слайдов на весь экран.
В списке ul размещается количество слайдов.
Класс carousel-item служит для создания самих слайдов. Можете добавить сколько вам удобно.
Описание того, что делает каждый класс из приведенного выше примера:
| Класс | Описание |
|---|---|
| .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 переход и эффект анимации при скольжении от одного элемента к следующему. Удалите этот класс, если вы не хотите, чтобы этот эффект |
Bootstrap пример
