I Shar

I Shar

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

Bootstrap: карусель

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

I Shar

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

Photo by tito pixel on Unsplash

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

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

Содержание

Цели урока

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

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

Основы

bootstrap carousel

Так выглядит исходный HTML-код:


    
    
    

    
    
    
    
    
    
    
    Bootstrap. Basic carousel

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

  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" включает автопроигрывание.

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

Индикаторы - необязательные (опциональные) элементы карусели, заключенные в блок

    . Каждый элемент списка li в данном блоке должен соответствовать определенному слайду (обычно - изображению) из .carousel-inner.

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

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

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

  1. 

    2.

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

    Как мы уже говорили ранее, основной контент карусели обернут в блок

    .

    Родительским блоком каждого слайда является

    . Кроме того, у первого слайда должен быть класс .active. Обычно слайд содержит изображение или изображение с описанием.

    Чтобы создать описание (caption), нужно поместить элемент

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

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

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

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

    

    
    Назад


    
    Вперед

    Дополнительные параметры (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-атрибутов:

    А теперь то же самое с помощью 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-код: вместо установим изображение фоном для элемента .carousel-item и уберем обертку .container:

    Затемнение

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

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

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

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

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

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

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

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

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

      • bootstrap
      • html
      • css

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

    Далее

    Категории

    О нас

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

    Copyright © 2021- I Shar .
    мир глазами веб-разработчика