Bootstrap 4: Слайдер изображений — пошаговая инструкция

Подготовка

Для начала скроем элемент, занимающий лишнее пространство на странице. Затем создадим блок 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, включая индикаторы, заголовки, кнопки и стили. Вы можете добавить больше слайдов и настроить стили по своему усмотрению.

Что будем искать? Например,программа