dr.Brain

doctor Brain

мир глазами веб-разработчика

Bootstrap: карусель

учимся создавать bootstrap carousel

dr.Brain

время чтения 6 мин.

Photo by tito pixel on Unsplash

Сarousel - стандартный JavaScript компонент в составе фронтенд фреймоворка Bootstrap, являющийся удобным инструментом демонстрации баннеров в составе слайдера.

При необходимости изображение в составе баннера может сопровождаться заголовком и описанием.

Содержание

Цели урока

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

  1. как добавить компонент carousel на страницу,
  2. научимся использовать дополнительные параметры (options) конфигурирования карусели,
  3. научимся управлять поведением (behaviour) карусели.

Основы

bootstrap carousel

Так выглядит исходный 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" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet">
    <!-- 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="" 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="" class="img-fluid">
                </div>
                <div class="carousel-item">
                    <img src="img/carousel_03.jpg" alt="" 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>

        <!-- Content -->

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Обратите внимание на следующие моменты:

  1. C помощью CDN мы подключаем файл стилей Bootstrap и минифицированную JavaScript библиотеку Bootstrap,
  2. JavaScript Bootstrap зависит от jQuery и PopperJS, поэтому не забываем подключить и эти библиотеки, в данном случае тоже с помощью CDN
  3. Карусель помещаем в блок.container. Так как мы хотим, чтобы выводимые изображения занимали всю ширину бутстраповского контейнера, классы .row или .col-* использовать нельзя.

Сама карусель, основным элементом которой является div.carousel, состоит из трех частей:

  1. ol.carousel-indicators: пагинация (навигация) обычно расположенная в нижней части карусели,
  2. div.carousel-inner: обертка для контента карусели (тело карусели),
  3. a.carousel-control-prev и a.carousel-control-next: навигация для соседних элементов карусели (или “стрелки”).

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

Чтобы создать карусель с помощью Bootstrap достаточно добавить элементу div класс .carousel и присвоить уникальный id, в данном случае id="carousel-basic".

Дополнительные параметры карусели можно определять с помощью data-атрибутов.

data-ride="carousel" включает автопроигрывание.

Итак, основной блок (обертка) карусели имеет такой вид:

<div id="carousel-basic" class="carousel slide" data-ride="carousel">
    ...
</div>

Индикаторы - необязательные (опциональные) элементы карусели, заключенные в блок <ol class="carousel-indicators">. Каждый элемент списка li в данном блоке должен соответствовать определенному слайду (обычно - изображению) из .carousel-inner.

Для каждого индикатора li существуют два обязательных data-атрибута:

  1. data-target - соответствует id карусели
  2. data-slide-to - указатель на порядковый номер слайда, соответствующего определенному индикатору (отсчет начинается с цифры 0 сверху вниз, например: 0 - первый слайд, 1 - второй слайд).

При старте первый элемент li должен иметь класс .active:

<li data-target="carousel-basic" data-slide-to="0" class="active"></li>

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

Как мы уже говорили ранее, основной контент карусели обернут в блок <div class="carousel-inner">.

Родительским блоком каждого слайда является <div class="carousel-item">. Кроме того, у первого слайда должен быть класс .active. Обычно слайд содержит изображение или изображение с описанием.

Чтобы создать описание (caption), нужно поместить элемент <div class="carousel-caption"> в родительский блок слайда.

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

Переход к соседним элементам (prev и next)

Для перехода к следующему или предыдущему слайду, достаточно добавить в карусель два элемента <a>.

Аттрибут href обеих ссылок должен содержать id карусели, а data-атрибут data-slide должен содержать одно из двух значений: prev - для перехода к предыдущему слайда или next - для перехода к следующему слайду.

<!-- 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>

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

В предыдущем разделе мы научились создавать карусель с помощью штатных инструментов Bootstrap. Самое время изучить дополнительные параметры.

interval

  • наименвание: interval
  • тип данных: number (число)
  • значение по умолчанию: 5000
  • период смены слайдов, если значение равно 0, автоматической смены слайдов не будет

pause

  • наименование: pause
  • тип данных: string | null (строка или null)
  • значение по умолчанию: “hover”
  • если установлено значение “hover”, смена слайдов будет останавливаться в ответ на событие mouseenter и продолжаться в ответ на событие mouseleave; если установлено значение “null”, остановки смены слайдов не будет

wrap

  • наименование: wrap
  • тип данных: boolean
  • значение по умолчанию: true
  • значение “true” определяет бесконечную смену слайдов, “false” - только один цикл смены слайдов: от первого до последнего

keyboard

  • наименование: keyboard
  • тип данных: boolean
  • значение по умолчанию: true
  • определяет реакцию карусели на клавиатуру

Дополнительные параметры (опции) можно установить с помощью data-атрибутов карусели или через JavaScript.

Пример определения data-атрибутов:

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

А теперь то же самое с помощью JavaScript:

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

Как изменить внешний вид и поведение?

Создание полноэкранного слайдера, с выравниванием сопутствующего текста по центру как по горизонтали, так и по вертикали - пожалуй самый востребованный вариант модификации карусели Bootstrap.

CSS

Для решения поставленной задачи определим высоту элемента: 100 vh. Для минимальной высоты установим значение 600px, чтобы гарантировать адекватный вывод текста на устройствах с небольшими экранами.

Для центрирования текста по вертикали нам пригодится transform: transition(0,-50%);

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

/* carousel fullscreen - vertically centered caption */
.carousel-fullscreen .carousel-caption {
    top: 50%;  
    bottom: auto;
    -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%);
}
HTML

Так же потребуется немного изменить HTML-код: вместо <img> установим изображение фоном для элемента .carousel-item и уберем обертку .container:

<div id="carousel-basic-fs" class="carousel slide carousel-fade carousel-fullscreen mb-5" data-ride="carousel">
    <!-- Indicators -->
    ...

    <!-- Wrapper -->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active" style="background-image: url('img/carousel_01.jpg');">
            <div class="carousel-caption">
                <h2>Карусель</h2>
                <p>это демонстрация возможностей компонента carousel</p>
            </div>
        </div>
        <div class="carousel-item" style="background-image: url('img/carousel_02.jpg');"></div>
        <div class="carousel-item" style="background-image: url('img/carousel_03.jpg');"></div>
    </div>

    <!-- Controls -->
    ...
</div>

Затемнение

Для улучшения читабильности текста довольно часто появляется необходимость затемнить слайд. Сделать это довольно легко - достаточно создать дополнительный элемент div.overlay в блоке <div class="carousel-item">.

CSS
/* overlay for better readibility of the caption  */

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    transition: all 0.2s ease-out;
}
HTML
<div class="item">
    <div class="overlay"></div>
    <div class="carousel-caption">
        ...
    </div>
</div>

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

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

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

По умолчанию процесс смены слайдов длится 0,6 секунды. Это может быть слишком быстро, особенно когда установлен эффект перехода “fade”, изменить этот показатель можно с помощью свойства transition-duration.

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

Так выглядит карусель при использовании только базовых настроек, а так после внесения изменений

Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.