English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap4

Слайдер Bootstrap4

Лента прокрутки (также известная как слайд-шоу или изображение слайдера) является одним из лучших методов для отображения большого объема контента в очень малом пространстве на веб-странице. Это динамическое представление контента, где, прокручивая несколько элементов по циклу, пользователь может видеть или доступить текст и изображения.

Лента прокрутки является циклической слайд-шоу (адрес:https://ru.oldtoolbag.com/run/html/bootstrap-carousel-example.html)

Как создать ленту прокрутки

Ниже приведен пример создания простого эффекта прокрутки изображений:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/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"></div>
　
　　<!-- Индикаторы -->
　　<ul class="carousel-indicators"></ul>
　　　　<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>
　
　　<!-- Изображения лензы -->
　　<div class="carousel-inner"></div>
　　　　<div class="carousel-item active"></div>
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/slide01.png"></img>
　　　　</div>
　　　　<div class="carousel-item"></div>
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/slide02.png"></img>
　　　　</div>
　　　　<div class="carousel-item"></div>
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/slide03.png"></img>
　　　　</div>
　　</div>
　
　　<!-- Кнопки переключения влево и вправо -->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev"></a>
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next"></a>
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>
Проверим, как это выглядит </>

добавьте описание к изображениям ленты прокрутки

в каждом <div внутри <div class="carousel-item"> добавьте <div>, чтобы установить текст описания轮播图片:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/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"></div>
　
　　<!-- Индикаторы -->
　　<ul class="carousel-indicators"></ul>
　　　　<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>
　
　　<!-- Изображения лензы -->
　　<div class="carousel-inner"></div>
　　　　<div class="carousel-item active"></div>
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/slide01.png"></img>
　　　　　　<div class="carousel-caption"></div>
　　　　　　　　<h2>Описание заголовка первой картинки</h2>
　　　　　　　　<p>Описание текста!</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item"></div>
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/slide02.png"></img>
　　　　　　<div class="carousel-caption"></div>
　　　　　　　　<h2>Описание заголовка второй картинки</h2>
　　　　　　　　<p>Описание текста!</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item"></div>
　　　　　　<img src="https://ru.oldtoolbag.com/run/images/slide03.png"></img>
　　　　　　<div class="carousel-caption"></div>
　　　　　　　　<h2>Описание заголовка третьей картинки</h2>
　　　　　　　　<p>Описание текста!</p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!-- Кнопки переключения влево и вправо -->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev"></a>
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next"></a>
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>
Проверим, как это выглядит </>

Описание используемого класса в данном примере

КлассОписание
.carouselСоздайте слайдер
.carousel-indicatorsДобавьте индикатор для слайдера, это точки под слайдером, которые показывают текущее изображение
.carousel-innerДобавьте изображения для переключения
.carousel-itemУкажите содержимое каждого изображения
.carousel-control-prevДобавьте левую кнопку, нажатие на которую вернётся к предыдущему изображению
.carousel-control-nextДобавьте правую кнопку, нажатие на которую переключит на следующее изображение
.carousel-control-prev-iconИспользуйте вместе с .carousel-control-prev, чтобы установить кнопку слева
.carousel-control-next-iconИспользуйте вместе с .carousel-control-next, чтобы установить кнопку справа
.slideПеремещение и анимация перехода изображений, если вы не хотите такого эффекта, вы можете удалить этот класс.
Модальные окна Bootstrap4Настройка форм Bootstrap4