Создание и настройка Bootstrap Carousel

Карousel — это стандартный JavaScript компонент Bootstrap, который позволяет создавать слайдеры для демонстрации баннеров. В этой статье мы рассмотрим, как настроить и улучшить карусель, добавляя заголовки, описания и эффекты.

Содержание

Содержание
Цели урока
Основы
Элементы карусели
Индикаторы
Тело карусели
Переходы между слайдами
Дополнительные параметры
Полноэкранная карусель
Затемнение
Эффекты смены слайдов
Время смены слайдов

Содержание

Цели урока
Основы
Элементы карусели
Индикаторы
Тело карусели
Переходы между слайдами
Дополнительные параметры
Изменение внешнего вида и поведения
Полноэкранная карусель
Затемнение
Эффекты смены слайдов
Время смены слайдов

Цели урока

В этом руководстве вы узнаете:

Как добавить компонент карусели на страницу.
Как использовать дополнительные параметры для настройки карусели.
Как управлять внешним видом и поведением карусели.

Основы

Пример базового HTML-кода для карусели:

<!doctype html>
<html lang="ru">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">

<title>Bootstrap. Basic carousel</title>
</head>
<body>
<!-- Carousel in a container -->
<div class="container">
<div id="carousel-basic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-basic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-basic" data-slide-to="1"></li>
<li data-target="#carousel-basic" data-slide-to="2"></li>
</ol>

<!-- Wrapper -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/carousel_01.jpg" alt="Создание и настройка Bootstrap Carousel" class="img-fluid">
<div class="carousel-caption">
<h2>Карусель</h2>
<p>Это демонстрация возможностей компонента carousel</p>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel_02.jpg" alt="Создание и настройка Bootstrap Carousel" class="img-fluid">
</div>
<div class="carousel-item">
<img src="img/carousel_03.jpg" alt="Создание и настройка Bootstrap Carousel" class="img-fluid">
</div>
</div>

<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-basic" 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="#carousel-basic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Вперед</span>
</a>
</div>
</div>

<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Элементы карусели

Карусель состоит из трех основных элементов:

Индикаторы (carousel-indicators) — для навигации между слайдами.
Тело карусели (carousel-inner) — содержит контент слайдов.
Переходы между слайдами (carousel-control-prev и carousel-control-next) — кнопки для переключения слайдов.

Индикаторы

Индикаторы помогают пользователю понять, сколько слайдов в карусели и какой слайд активен. Они создаются с помощью элемента ol.carousel-indicators:

<ol class="carousel-indicators">
<li data-target="#carousel-basic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-basic" data-slide-to="1"></li>
<li data-target="#carousel-basic" data-slide-to="2"></li>
</ol>

Тело карусели

Основной контент карусели размещается в элементе div.carousel-inner. Каждый слайд представлен элементом div.carousel-item, первый из которых должен иметь класс .active:

<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/carousel_01.jpg" alt="Создание и настройка Bootstrap Carousel" class="img-fluid">
<div class="carousel-caption">
<h2>Карусель</h2>
<p>Это демонстрация возможностей компонента carousel</p>
</div>
</div>
...
</div>

Переходы между слайдами

Для перехода к следующему или предыдущему слайду используются элементы a с классами carousel-control-prev и carousel-control-next:

<a class="carousel-control-prev" href="#carousel-basic" 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="#carousel-basic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Вперед</span>
</a>

Дополнительные параметры

Карусель может быть настроена с помощью дополнительных параметров, таких как interval, pause, wrap, и keyboard. Эти параметры могут быть установлены через data-атрибуты или JavaScript.

<div id="carousel-basic" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
...
</div>

$('#carousel-basic').carousel({
interval: 3000,
pause: null
});

Полноэкранная карусель

Для создания полноэкранного слайдера с выравниванием текста по центру используйте CSS-свойства height: 100vh и transform: translate(0, -50%):

.carousel-fullscreen .carousel-inner .carousel-item {
height: 100vh;
min-height: 600px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

.carousel-fullscreen .carousel-caption {
top: 50%;
bottom: auto;
transform: translate(0, -50%);
}

Затемнение

Чтобы улучшить читабельность текста на слайдах, добавьте затемняющий слой с помощью элемента div.overlay:

.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.3;
}

<div class="carousel-item">
<div class="overlay"></div>
<div class="carousel-caption">
...
</div>
</div>

Эффекты смены слайдов

Чтобы сменить эффект перехода слайдов на fade, добавьте класс .carousel-fade к элементу карусели.

Время смены слайдов

Измените время перехода слайдов, установив значение transition-duration:

.carousel .carousel-item {
transition-duration: 1.5s;
}

Теперь ваша карусель готова! Вы можете добавлять и изменять слайды, а также настраивать параметры для создания уникального и динамичного контента на вашем сайте.