Подготовка
Для начала скроем элемент, занимающий лишнее пространство на странице. Затем создадим блок div для слайдера с классами carousel slide. Добавим атрибуты data-ride="carousel" для инициализации карусели и id="myCarousel" (или любое другое уникальное имя) для управления слайдером.
Создание слайдов
Внутри блока слайдера создадим div с классом carousel-inner. Внутри него разместим элементы div (не <li>), каждый из которых представляет собой слайд. Первый слайд получит класс active. Внутри каждого элемента добавим тег <img> с атрибутом src, указывающим на путь к изображению.
Пример:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/slider1.jpeg" alt="Слайд 1">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slider2.jpeg" alt="Слайд 2">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slider3.jpeg" alt="Слайд 3">
</div>
</div>
</div>
Загрузите три изображения (желательно с большей шириной, чем высотой) и поместите их в папку проекта img. Пути к изображениям (src) в примере кода должны соответствовать фактическому расположению файлов.
Индикаторы слайдов
Добавим список <ol> с классом carousel-indicators. Каждый элемент списка <li> будет представлять индикатор с атрибутами data-target="#myCarousel" (ссылка на слайдер) и data-slide-to, указывающим на индекс слайда (отсчет с нуля). Первый элемент получит класс active.
Пример:
<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>
Этот список создаст три точки под слайдером для переключения слайдов.
Текст и кнопки
Добавим содержимое для каждого слайда: заголовки (<h1>, <h3>), кнопки (<button>). Для центрирования используем класс carousel-caption.
Пример:
<div class="carousel-caption d-none d-md-block">
<h1>Программирование в отпуск</h1>
<h3>Научитесь программировать</h3>
<button type="button" class="btn btn-outline-light btn-lg">Посмотреть</button>
<button type="button" class="btn btn-lg btn-warning">Демо сайта</button>
</div>
Стили CSS
Для корректного отображения слайдера, добавим стили CSS.
Пример стилей:
.carousel-inner img {
transform: translateY(-30%); /* Поднимаем изображение для лучшего отображения */
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -80%); /* Позиционирование заголовка */
text-shadow: 1px 1px 10px #000; /* Тень для текста */
}
Стили устанавливают высоту карусели, позиционируют заголовок и добавляют тень к тексту. translateY(-30%) поднимает изображение.
Мы создали функциональный слайдер изображений с использованием Bootstrap 4, включая индикаторы, заголовки, кнопки и стили. Вы можете добавить больше слайдов и настроить стили по своему усмотрению.