Как это работает
«Карусель» — это слайд-шоу для отображения серии содержимого, созданная на основе CSS 3D-трансформаций и немного на JavaScript. Она работает с текстом, изображениями или обычной разметкой. Она также поддерживает кнопки “next/prev”.
В браузерах с поддержкой API видимости страниц элементы карусели не будут сменяться, когда страница невидима пользователю (например, когда вкладка браузера неактивна, или окно браузера «минимизировано» — кнопка «квадратик» слева от крестика «закрыть браузер», и т.д.).
Эффект анимации этого компонента зависит от медиа запроса prefers-reduced-motion. Смотрите раздел о редукции анимаций.
Учтите, что вложенные карусели не поддерживаются, а карусели в целом не очень желательны «стандартам доступности».
Пример
Карусель не подстраивает автоматически размер содержимого слайдов. Поэтому вам могут понадобиться дополнительные утилиты для придания их содержимому нужного размера. Пока карусели поддерживают кнопки «prev/next», их не надо добавлять явно. Добавьте и настраивайте их самостоятельно.
Класс .active добавляют к одному из слайдов, иначе карусель не будет видно. Также для внедрения элементов управления необходимо задать уникальный ID элементу класса .carousel, особенно если у вас много каруселей на одной странице. Элементы управления и индикаторы должны иметь атрибут data-target (или href для <a>), который совпадает с ID элемента класса .carousel.
Задавайте уникальный id классу .carousel для возможности гибкого управления, особенно если вы используете много каруселей на странице.
Только слайды
Вот пример карусели, где есть только слайды. Заметьте присутствие классов .d-block и .w-100, отменяющих дефолтное выравнивание изображений в браузерах у изображений карусели.
PlaceholderПервый слайд
PlaceholderВторой слайд
PlaceholderТретий слайд
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>С элементами управления
Добавляет кнопки prev/next:
PlaceholderПервый слайд
PlaceholderВторой слайд
PlaceholderТретий слайд
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>С индикаторами
Вы также можете добавить индикаторы к карусели, наряду с органами управления.
PlaceholderПервый слайд
PlaceholderВторой слайд
PlaceholderТретий слайд
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>С надписями
Добавляйте надписи в ваши слайды с помощью добавления элемента класса .carousel-caption в любой элемент карусели класса .carousel-item. Надписи легко скрыть на меньших устройствах, используя утилиты отображения элементов. Они спрятаны первоначально с помощью класса .d-none и показываем их опять на средних устройствах с помощью класса .d-md-block.
Метка первого слайда
Некоторый репрезентативный заполнитель для первого слайда.
Метка второго слайда
Некоторый репрезентативный заполнитель для второго слайда.
Метка третьего слайда
Некоторый репрезентативный заполнитель для третьего слайда.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Метка первого слайда</h5>
<p>Некоторый репрезентативный заполнитель для первого слайда.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Метка второго слайда</h5>
<p>Некоторый репрезентативный заполнитель для второго слайда.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Метка третьего слайда</h5>
<p>Некоторый репрезентативный заполнитель для третьего слайда.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>Склейка (плавный переход)
Добавьте .carousel-fade в вашу карусель для анимации слайдов с постепенным переходом на следующий слайд.
PlaceholderПервый слайд
PlaceholderВторой слайд
PlaceholderТретий слайд
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>Индивидуальный интервал .carousel-item
Добавьте data-interval="" к элементу .carousel-item, чтобы изменить время задержки между автоматическим циклическим переходом к следующему элементу.
PlaceholderПервый слайд
PlaceholderВторой слайд
PlaceholderТретий слайд
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>Отключенный сенсорный свайпинг
Карусели поддерживают смахивание влево/вправо на устройствах с сенсорным экраном для перемещения между слайдами. Это можно отключить с помощью атрибута data-bs-touch. Пример ниже также не включает атрибут data-bs-ride и имеет data-bs-interval="false", поэтому он не запускается автоматически.
PlaceholderПервый слайд
PlaceholderВторой слайд
PlaceholderТретий слайд
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>Темный вариант
Добавьте .carousel-dark к .carousel для отображения более темных элементов управления, индикаторов и подписей. По умолчанию элементы управления инвертированы и смотрятся более темными по сравнению с их белой заливкой благодаря свойству CSS filter. Заголовки и элементы управления имеют дополнительные Sass переменные, которые настраивают цвет color и цвет фона background-color.
Метка первого слайда
Некоторый репрезентативный заполнитель для первого слайда.
Метка второго слайда
Некоторый репрезентативный заполнитель для второго слайда.
Метка третьего слайда
Некоторый репрезентативный заполнитель для третьего слайда.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Метка первого слайда</h5>
<p>Некоторый репрезентативный заполнитель для первого слайда.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Метка второго слайда</h5>
<p>Некоторый репрезентативный заполнитель для второго слайда.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Метка третьего слайда</h5>
<p>Некоторый репрезентативный заполнитель для третьего слайда.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Предыдущий</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Следующий</span>
</button>
</div>Изменение продолжительности перехода
Длительность перехода .carousel-item может быть изменена с помощью переменной Sass $carousel-transition-duration перед компиляцией или настраиваемыми стилями, если вы используете скомпилированный CSS. Если применяется несколько переходов, убедитесь, что сначала определен переход преобразования (например, transition: transform 2s ease, opacity .5s ease-out).
Sass
Переменные
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Использование
Через атрибуты
Используйте атрибуты данных, чтобы легко контролировать положение карусели. data-bs-slide принимает ключевые слова prev или next, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы, используйте data-bs-slide-to, чтобы передать необработанный индекс слайда в карусель data-bs-slide-to="2", который сдвигает положение слайда на конкретный индекс, начинающийся с 0.
Атрибут data-bs-ride="carousel" используется для пометки карусели как анимированной, начиная с загрузки страницы. Если Вы не используете data-bs-ride="carousel" для инициализации карусели, Вам придется инициализировать ее самостоятельно. Его нельзя использовать в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.
Через JavaScript
Вызов карусели вручную с помощью:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Параметры
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-interval="".
| Наименование | Тип | По умолчанию | Описание |
|---|---|---|---|
interval |
number | 5000 |
Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться. |
keyboard |
boolean | true |
Должна ли карусель реагировать на события клавиатуры. |
pause |
string | boolean | 'hover' |
Если задано значение На устройствах с сенсорным экраном, когда установлено значение |
ride |
string | boolean | false |
Автоматически отображает карусель после того, как пользователь вручную перебирает первый элемент. Если установлено значение 'carousel', карусель автоматически отображается при загрузке. |
wrap |
boolean | true |
Должна ли карусель работать непрерывно или иметь жесткие остановки. |
touch |
boolean | true |
Должна ли карусель поддерживать взаимодействие смахивания влево/вправо на устройствах с сенсорным экраном. |
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
Смотрите нашу документацию по JavaScript.
Вы можете создать экземпляр карусели с помощью конструктора карусели, например, для инициализации с дополнительными параметрами и начала циклического перебора элементов:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
| Метод | Описание |
|---|---|
cycle |
Перебирает элементы карусели слева направо. |
pause |
Не дает карусели перебирать элементы. |
prev |
Переходит к предыдущему элементу. Возврат к вызывающему абоненту до того, как был показан предыдущий элемент (например, до возникновения события slid.bs.carousel). |
next |
Переход к следующему элементу. Возврат к вызывающему абоненту до того, как будет показан следующий элемент (например, до того, как произойдет событие slid.bs.carousel). |
nextWhenVisible |
Не переключать карусель на следующую, если страница не отображается или карусель или ее родительский элемент не видны. Возврат к вызывающему абоненту до того, как будет показан целевой элемент |
to |
Циклически переключает карусель на конкретный кадр (на основе 0, аналогично массиву). Возврат к вызывающему абоненту до того, как будет показан целевой элемент (например, до того, как произойдет событие slid.bs.carousel). |
dispose |
Уничтожает элемент карусели. (Удаляет сохраненные данные в элементе DOM) |
getInstance |
Статический метод, позволяющий получить экземпляр карусели, связанный с элементом DOM. |
События
Класс карусели Bootstrap предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства:
direction: Направление, в котором движется карусель ("left"или"right").relatedTarget: Элемент DOM, который вставляется на место как активный элемент.from: Индекс текущего элементаto: Индекс следующего элемента
Все события карусели запускаются в самой карусели (т.е. в <div class="carousel">).
| Тип события | Описание |
|---|---|
slide.bs.carousel |
Это событие запускается немедленно, когда вызван метод slide. |
slid.bs.carousel |
Это событие запускается, когда карусель завершила переходы своих слайдов. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
How it works
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
Example
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
The .active class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element.
Slides only
Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>With controls
Adding in the previous and next controls. We recommend using <button> elements, but you can also use <a> elements with role="button".
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>With indicators
You can also add the indicators to the carousel, alongside the controls, too.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>With captions
Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Crossfade
Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Individual .carousel-item interval
Add data-bs-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Disable touch swiping
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the data-bs-touch attribute. The example below also does not include the data-bs-ride attribute and has data-bs-interval="false" so it doesn’t autoplay.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Dark variant
Add .carousel-dark to the .carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Custom transition
The transition duration of .carousel-item can be changed with the $carousel-transition-duration Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. transition: transform 2s ease, opacity .5s ease-out).
Sass
Variables
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Usage
Via data attributes
Use data attributes to easily control the position of the carousel. data-bs-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-bs-slide-to to pass a raw slide index to the carousel data-bs-slide-to="2", which shifts the slide position to a particular index beginning with 0.
The data-bs-ride="carousel" attribute is used to mark a carousel as animating starting at page load. If you don’t use data-bs-ride="carousel" to initialize your carousel, you have to initialize it yourself. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
Via JavaScript
Call carousel manually with:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-interval="".
| Name | Type | Default | Description |
|---|---|---|---|
interval |
number | 5000 |
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
keyboard |
boolean | true |
Whether the carousel should react to keyboard events. |
pause |
string | boolean | 'hover' |
If set to On touch-enabled devices, when set to |
ride |
string | boolean | false |
Autoplays the carousel after the user manually cycles the first item. If set to 'carousel', autoplays the carousel on load. |
wrap |
boolean | true |
Whether the carousel should cycle continuously or have hard stops. |
touch |
boolean | true |
Whether the carousel should support left/right swipe interactions on touchscreen devices. |
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
See our JavaScript documentation for more information.
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
| Method | Description |
|---|---|
cycle |
Cycles through the carousel items from left to right. |
pause |
Stops the carousel from cycling through items. |
prev |
Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs). |
next |
Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs). |
nextWhenVisible |
Don’t cycle carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the target item has been shown |
to |
Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs). |
dispose |
Destroys an element’s carousel. (Removes stored data on the DOM element) |
getInstance
|
Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element)
|
getOrCreateInstance
|
Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn’t initialised. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element)
|
Events
Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
direction: The direction in which the carousel is sliding (either"left"or"right").relatedTarget: The DOM element that is being slid into place as the active item.from: The index of the current itemto: The index of the next item
All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).
| Event type | Description |
|---|---|
slide.bs.carousel |
Fires immediately when the slide instance method is invoked. |
slid.bs.carousel |
Fired when the carousel has completed its slide transition. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
I’m trying to get the default bootstrap carousel indicators to be very thin yellow lines stuck at the bottom as shown below.
I got them to be at the bottom of the page but I can’t seem to change them into rectangles or change their color.
HTML
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
CSS
.carousel-indicators {
margin: 0px;
height: 0px;
}
.carousel-indicators ol {
width: 100%;
}
.carousel-indicators li {
height: 3px !important;
border-radius: 0px !important;
width: 25%;
}
Abraham
7,6084 gold badges44 silver badges52 bronze badges
asked Oct 8, 2016 at 20:30
cosmichero2025cosmichero2025
1,0294 gold badges13 silver badges36 bronze badges
2
Something like this? Note that the width is not totally accurate because I just made it 33%.
.item img {
width: 100%;
height: auto
}
.carousel {
position: relative;
width: 200px;
height: 100px;
}
ol.carousel-indicators {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
float: left;
width: 33%;
height: 10px;
margin: 0;
border-radius: 0;
border: 0;
background: transparent;
}
ol.carousel-indicators li.active {
background: yellow;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/200x100" alt="Slide 1">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 2">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 3">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>answered Oct 8, 2016 at 20:50
2
Great css! I played with it to come up with ball indicators in half-white and the active indicator in yellow.
ol.carousel-indicators {
position: absolute;
bottom: 5px;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li, ol.carousel-indicators li.active {
width: 1rem;
height: 1rem;
margin: 0;
border-radius: 50%;
border: 0;
background: transparent;
}
ol.carousel-indicators li {
background: rgba(255,255,255,0.39);
margin-left: .5rem;
margin-right: .5rem;
}
ol.carousel-indicators li.active {
background: yellow;
}
Abraham
7,6084 gold badges44 silver badges52 bronze badges
answered Jul 31, 2018 at 9:56
0
i have just wrote similar code for myself,
i think it will help you a little bit more.
by using Flex layout you can similarly stretch indicators
without worrying about their width
flex-grow:1; makes this job
.carousel /*slider */
{
position: relative;
}
.carousel .carousel-indicators /* indicator wrapper*/
{
position: absolute;
bottom: 0;
left:0px;
width: 100%;
margin: 0;
left: 0;
right: 0;
width: 100%;
display: flex; /* this is for indicators */
}
#headcarousel_container .carousel-indicators li /* indicators*/
{
flex-grow: 1; /* make all indicator li similarly stretched */
height: 40px;
border-radius: 2px;
}
#headcarousel_container .carousel-indicators li.active
{
background-color:rgba(251,222,87,0.5) ;/* changes indicators color when it is active*/
}
.carousel .carousel-inner .item img
{
width: 100%;
height: 100vh;
object-fit: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--slider -->
<div class="container-fluid" id="headcarousel_container" style="padding: 0;">
<div id="headcarouselid" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<ul class="carousel-indicators">
<li class="active" data-target="#headcarouselid" data-slide-to="0"></li>
<li class="" data-target="#headcarouselid" data-slide-to="1"></li>
<li class="" data-target="#headcarouselid" data-slide-to="2"></li>
<li class="" data-target="#headcarouselid" data-slide-to="3"></li>
<li class="" data-target="#headcarouselid" data-slide-to="4"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2014/07/28/20/39/landscape-404072_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/08/23/07/35/thunderstorm-3625405_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/09/08/20/29/chess-2730034_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/05/30/15/31/rustic-3441673_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#headcarouselid" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#headcarouselid" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>answered Feb 27, 2019 at 1:27
This snippet changes prev and next Carousel icon controls for library react-bootstrap :
& span.carousel-control-prev-icon, & span.carousel-control-next-icon{
background-color: black;
}
Yeah, only the background. The icon itself is an xml image so couldn’t find a way to change the colors. :/
answered Feb 1, 2022 at 23:44
julianmjulianm
2,1771 gold badge22 silver badges24 bronze badges
В этой статье рассмотрим как на страницу, к которой подключён Bootstrap 3 или 4 версии, добавить карусель или слайдер. Содержимое слайдов карусели может быть разнообразным: текстовым, в виде изображения или другого контента.
Что такое карусель
Carousel (карусель) – это элемент интерфейса для демонстрации на сайте серии изображений (слайдов). Каждое изображение (слайд) демонстрируется обычно несколько секунд, пока не сменится следующим. Смена изображения (слайда) может осуществляться как автоматически через равные промежутки времени, так и вручную.
Слайд в Bootstrap карусели может быть представлен не только изображением, но и текстовым контентом. Кроме этого при создании слайда можно использовать разметку.
В Bootstrap компонент Carousel построен с помощью технологии CSS 3D Transforms и кода JavaScript.
Карусель в Bootstrap реализована с использованием Page Visibilty API. Это означает, что если браузер поддерживает этот API, то карусель не будет осуществлять автоматическую смену слайдов до тех пор, пока она не будет видна пользователю. Например, до тех пор, пока вкладка, содержащая карусель, будет находиться в не активном или свёрнутом состоянии.
Фреймворк Boostrap 3 и 4 не позволяет создавать вложенные карусели.
Карусель без элементов управления
Компонент Carousel автоматически не нормализует размеры изображений (слайдов). Таким образом, могут потребоваться дополнительные утилиты или стили, чтобы привести содержимое к необходимому размеру.
Один из примеров, как это выполнить с помощью CSS, можно посмотреть в этой статье.
Важно! Класс active необходимо добавить к одному из слайдов. Если это не выполнить, то карусель не будет отображаться.
HTML-разметка карусели в Bootstrap 3:
<!-- Bootstrap 3 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
</div>
</div>
HTML разметка карусели в Bootstrap 4 отличается только классом item. Вместо него необходимо использовать carousel-item. Кроме этого в Boostrap 4 к изображениям, для придания им адаптивности, необходимо добавить класс img-fluid.
HTML-разметка карусели в Bootstrap 4:
<!-- Bootstrap 4 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
</div>
</div>
Атрибут data-ride=»carousel» запускает автоматическую смену слайдов карусели после загрузки страницы. Если инициализация карусели выполняется с помощью JavaScript, то этот атрибут не нужно использовать.
Карусель с элементами управления
Важно! Карусель с элементами управления и (или) с индикаторами слайдов должна иметь id. А элементы управления и индикаторы слайдов должны иметь атрибут data-target (или href для ссылок), значение которого должно указывать на карусель (т.е. состоять из # и id).
HTML разметка карусели с элементами управления для перехода к предыдущему и следующему слайду:
<!-- Bootstrap 3 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
</div>
<!-- Элементы управления -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
<!-- Bootstrap 4 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
</div>
<!-- Элементы управления -->
<a class="carousel-control-prev" href="#carousel" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
Поведение кнопок «Предыдущий» и «Следующий» определяется в карусели с помощью атрибута data-slide.
Значение prev данного атрибута связывает с кнопкой определённые действия, с помощью которых она будет осуществлять смену текущего слайда на предыдущий. Значение next связывает с кнопкой соответственно другие действия, которые будут выполнять смену текущего слайда на следующий.
Карусель с индикаторами слайдов
К карусели с элементами управления, также можно ещё добавить индикаторы слайдов.
<!-- Bootstrap 3 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Индикаторы -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
</div>
<!-- Элементы управления -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
<!-- Bootstrap 4 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Индикаторы -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
</div>
<!-- Элементы управления -->
<a class="carousel-control-prev" href="#carousel" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
Атрибут data-slide-to добавляет к карусели возможность дополнительной навигации по слайдам с помощью индикаторов. Атрибут data-slide-to в качестве значения содержит порядковый номер (индекс) слайда. Отсчёт слайдов в карусели ведётся с нуля. Если необходимо чтобы при клике на индикатор пользователь перешёл, на третий слайд, то к индикатору необходимо добавить атрибут data-slide-to со значением 2.
Добавление надписей к слайдам карусели
К слайдам можно добавить надписи. Осуществляется это посредством добавления к каждому слайду, некоторого элемента, например, div, с классом carousel-caption. При необходимости эти надписи можно с помощью классов display отображать на одних экранах и скрывать на других.
Классы Boostrap 4 предназначенные для управления отображением элементов приведены в этой статье.
<!-- Bootstrap 3 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Индикаторы -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Элементы управления -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Предыдущий</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
<!-- Bootstrap 4 -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Индикаторы -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Элементы управления -->
<a class="carousel-control-prev" href="#carousel" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
Добавьте к карусели класс carousel-fade, чтобы изменить анимацию перехода на анимацию появления.
<!-- Bootstrap 4 -->
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Индикаторы -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
</div>
<!-- Элементы управления -->
<a class="carousel-control-prev" href="#carousel" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Следующий</span>
</a>
</div>
Инициализация карусели с помощью JavaScript
Карусель можно активировать с помощью кода JavaScript:
$('.carousel').carousel();
Вместо ‘.carousel’ укажите необходимый селектор для выбора одной или множества каруселей, которые нужно активировать.
Настройка карусели
Настройка карусели осуществляется с помощью параметров. Параметры можно устанавливать как с помощью data-атрибутов, так и посредством JavaScript.
При использовании data-атрибутов, добавьте к имени параметра приставку data-. Например, для установки параметра interval необходимо использовать атрибут с именем data-interval.
| Имя | Описание |
|---|---|
| interval | Значение по умолчанию (миллисекунд): 5000, т.е. 5 секунд. Параметр interval устанавливает количество времени в миллисекундах (паузу) между автоматической сменой слайдов карусели. Если данному параметру указать значение false, то карусель не будет выполнять автоматическую смену слайдов. |
| keyboard | Значение по умолчанию: true. Данный параметр определяет должна ли карусель реагировать на события клавиатуры. |
| pause |
Значение по умолчанию: «hover». Если параметр pause имеет значение «hover», то смена слайдов, при нахождении курсора над ней, не будет выполняться. А при покидании курсора смена слайдов будет опять возобновляться. Если параметру pause установить значение false, то нахождение курсора над каруселью не будет останавливать автоматическую смену слайдов. На устройствах с сенсорным экраном, при значении «hover», пауза будет устанавливаться на касание. Но после касания, карусель начнёт сменять слайды только после времени, равное 2 интервалам (по умолчанию, равное 10 секундам). |
| ride | Значение по умолчанию: false. При значении false, запуск автоматической смены слайдов произойдёт только после того, как пользователь вручную (с помощью элементов управления или индикаторов) перейдёт к другому слайду. Если в качестве этого параметра установить значение «carousel», то смена слайдов запустится автоматически сразу после загрузки страницы. |
| wrap | Значение по умолчанию: true. Данный параметр определяет должна ли смена слайдов зацикливаться. Т.е. после последнего слайда осуществляться переход к первому при движении next и после первого к последнему при движении prev. Если это не нужно, то значение параметра wrap необходимо установить равное false. |
Методы плагина Carousel
Методы плагина Carousel приведены в таблице.
| Имя | Описание |
|---|---|
| .carousel(options) | Инициализирует один или множество выбранных элементов в качестве карусели с указанными параметрами. |
| .carousel(‘cycle’) | Запускает процесс автоматической смены слайдов (слева направо). |
| .carousel(‘pause’) | Отменяет процесс автоматической смены слайдов. |
| .carousel(number) | Выполняет переход на указанный слайд карусели. Отсчёт слайдов ведётся с 0. Поэтому, например, чтобы перейти на второй слайд, методу carousel необходимо передать число 1. |
| .carousel(‘prev’) | Выполняет переход на предыдущий слайд. |
| .carousel(‘next’) | Выполняет переход на следующий слайд. |
Пример инициализации карусели с параметрами:
<div id="carousel" class="carousel slide">
...
</div>
...
<script>
$(function () {
$('#carousel').carousel({
interval: 10000,
keyboard: false,
pause: 'hover',
ride: 'carousel',
wrap: false
});
});
</script>
Пример использование методов для управления каруселью:
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
</div>
</div>
<div class="my-2">
<button class="btn btn-primary" data-action="cycle">Запустить</button>
<button class="btn btn-primary" data-action="pause">Остановить</button>
<button class="btn btn-primary" data-action="prev">Предыдущий</button>
<button class="btn btn-primary" data-action="next">Следующий</button>
<button class="btn btn-primary" data-action="to-1">На 1 слайд</button>
<button class="btn btn-primary" data-action="to-2">На 2 слайд</button>
<button class="btn btn-primary" data-action="to-3">На 3 слайд</button>
</div>
...
<script>
$(function () {
// метод cycle
$('.btn').click(function () {
var action = $(this).attr('data-action');
if (action.indexOf('to') >= 0) {
var action = parseInt(action.substring(3))-1;
}
$('#carousel').carousel(action);
});
});
</script>
События плагина Carousel
JS Bootstrap генерирует для карусели два события.
| Имя | Описание |
|---|---|
| slide.bs.carousel | Событие возникает перед началом смены слайда. |
| slid.bs.carousel | Событие возникает после завершения смены слайда. |
Оба эти события имеют следующие дополнительные свойства:
- direction — направление слайдинга («left» или «right»);
- relatedTarget — DOM-элемент, который перемещается на место текущего;
- from — индекс текущего элемента;
- to — индекс следующего элемента.
Свойства from и to имеются только в Bootstrap 4.
Пример работы с событиями:
<!-- Bootstrap 4 -->
<div class="container">
<div class="row">
<div class="col-6">
<div id="carousel" class="carousel slide" data-ride="carousel">
...
</div>
<ul class="info text-left"></ul>
</div>
<div class="col-6">
<ul class="log text-left" style="height: 200px; overflow-y: auto;"></ul>
</div>
</div>
</div>
...
<script>
$(function () {
var t = function () {
var now = new Date();
var m = now.getMinutes();
var s = now.getSeconds();
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
return m + ':' + s;
};
$('#carousel').on('slide.bs.carousel', function (e) {
$('.log').prepend('<li>' + t() + ' - slide.bs.carousel</li>');
var info = '<li><b>direction</b> = ' + e.direction + '</li>';
info += '<li><b>DOM-элемент</b> = ' + $(e.relatedTarget).attr('id') + '</li>';
info += '<li><b>from</b> = ' + e.from + '</li>';
info += '<li><b>to</b> = ' + e.to + '</li>';
$('.info').html(info);
});
$('#carousel').on('slid.bs.carousel', function (e) {
$('.log').prepend('<li>' + t() + ' - slid.bs.carousel</li>');
});
});
</script>
Пример работы с событиями карусели в Bootstrap 3:
Открыть пример
Изменение длительности перехода (Bootstrap 4)
Длительность перехода элементов .carousel-item может быть изменена с помощью Sass переменной $carousel-transition перед компиляцией или пользовательскими стилями, если используете уже скомпилированный CSS. Если применяете несколько переходов, то выполните сначала transition transform (например: transform 2.5s ease, opacity .75s ease-out).
Примеры
1. Карусель с автоматической нумерацией слайдов:
<style>
.carousel-number {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .8);
line-height: 40px;
font-size: 20px;
}
</style>
...
<script>
$('.carousel').find('.carousel-item').each(function (index, item) {
var carouselItem = $(item).find('.carousel-number');
if (carouselItem.length > 0) {
carouselItem.text(index + 1);
return;
}
var element = $('<div></div>');
element
.addClass('carousel-number')
.text(index + 1);
$(item).append(element);
});
</script>
2. Скрипт для слайдера без зацикливания (data-wrap="false"), который скрывает стрелку влево на первом слайде и стрелку вправо – на последнем:
// #carousel - селектор слайдера
document.addEventListener('DOMContentLoaded', function () {
function toggleCarouselControl($slider, to) {
var $prev = $slider.find('[data-slide="prev"]');
var $next = $slider.find('[data-slide="next"]');
var displayPrev = to === 0 || to === undefined ? 'none' : 'flex';
var displayNext = to === $slider.find('.carousel-item').length - 1 ? 'none' : 'flex';
$prev.css('display', displayPrev);
$next.css('display', displayNext);
}
toggleCarouselControl($('#carousel'));
$('#carousel').on('slide.bs.carousel', function (e) {
toggleCarouselControl($(this), e.to);
});
});
Как это устроено
Карусель — это слайд-шоу для циклического просмотра серии контента, созданного с помощью преобразований CSS 3D и небольшого количества JavaScript. Он работает с серией изображений, текста или пользовательской разметки. Он также включает поддержку предыдущего / следующего элементов управления и индикаторов.
В браузерах, где поддерживается API видимости страницы, карусель будет избегать скольжения, когда веб-страница не видна пользователю (например, когда вкладка браузера неактивна, окно браузера свернуто и т.д.).
Имейте в виду, что вложенные карусели не поддерживаются, а карусели обычно не соответствуют стандартам доступности.
Примеры
Карусели не нормализуют автоматически размеры слайдов. Таким образом, вам может потребоваться использовать дополнительные утилиты или настраиваемые стили для соответствующего размера содержимого. Хотя карусели поддерживают элементы управления и индикаторы «предыдущий / следующий», они явно не требуются. Добавляйте и настраивайте по своему усмотрению.
В .activeпотребности класса , которые должны быть добавлены к одному из слайдов иначе карусель не будет видно. Также не забудьте установить уникальный идентификатор .carousel для дополнительных элементов управления, особенно если вы используете несколько каруселей на одной странице. Элементы управления и индикаторы должны иметь data-target атрибут (или href для ссылок), соответствующий идентификатору .carousel элемента.
Только слайды
Вот карусель только со слайдами. Обратите внимание на наличие .d-block и .w-100 на изображениях карусели, чтобы предотвратить выравнивание изображений по умолчанию в браузере.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>С элементами управления
Добавление предыдущего и следующего элементов управления:
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
Предыдущий
следующий
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>С индикаторами
Вы также можете добавить индикаторы в карусель вместе с элементами управления.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
Предыдущий
следующий
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>С подписями
Легко добавляйте подписи к слайдам с помощью .carousel-caption элемента в любом .carousel-item. Их можно легко скрыть на небольших видовых экранах, как показано ниже, с помощью дополнительных утилит отображения. Первоначально мы скрываем их с помощью .d-noneи возвращаем на устройства среднего размера с .d-md-block.
Метка первого слайда
Nulla vitae elit libero, pharetra augue mollis interdum.
Метка второго слайда
Lorem ipsum dolor sit amet, conctetur adipiscing elit.
Метка третьего слайда
Praesentmodo cursus magna, vel scelerisque nisl conctetur.
Предыдущий
следующий
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>Кроссфейд
Добавьте .carousel-fade в свою карусель, чтобы анимировать слайды с плавным переходом вместо слайда.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
Предыдущий
следующий
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>Индивидуальный интервал для .carousel-item
Добавьте data-interval="" к .carousel-item, чтобы изменить время задержки между автоматическим переходом к следующему элементу.
PlaceholderFirst slide
PlaceholderSecond slide
PlaceholderThird slide
Предыдущий
следующий
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>Темный вариант
Добавить .carousel-dark к .carousel для более темных элементов управления, индикаторов и титров. Элементы управления были инвертированы по сравнению с их белой заливкой по умолчанию с filter помощью свойства CSS. Заголовки и элементы управления имеют дополнительные переменные Sass, которые настраивают color и background-color.
Метка первого слайда
Nulla vitae elit libero, pharetra augue mollis interdum.
Метка второго слайда
Lorem ipsum dolor sit amet, conctetur adipiscing elit.
Метка третьего слайда
Praesentmodo cursus magna, vel scelerisque nisl conctetur.
Предыдущий
следующий
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleDark" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleDark" data-slide-to="1"></li>
<li data-target="#carouselExampleDark" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item" data-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleDark" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>Применение
Через атрибуты данных
Используйте атрибуты данных, чтобы легко контролировать положение карусели. data-slideпринимает ключевые слова prevили next, который изменяет положение слайда относительно его текущего положения. В качестве альтернативы используйте data-slide-toдля передачи необработанного индекса слайда в карусель data-slide-to="2", которая сдвигает положение слайда на определенный индекс, начиная с 0.
data-ride="carousel"Атрибут используется для обозначения как карусель анимации , начиная с загрузки страницы. Если вы не используете data-ride="carousel"для инициализации карусели, вам придется инициализировать ее самостоятельно. Его нельзя использовать в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.
Через JavaScript
Вызов карусели вручную с помощью:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Параметры
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра data-, как в data-interval="".
| имя | Тип | По умолчанию | Описание |
|---|---|---|---|
interval |
количество | 5000 |
Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться. |
keyboard |
логический | true |
Должна ли карусель реагировать на события клавиатуры. |
pause |
строка | логический | "hover" |
Если установлено значение На устройствах с сенсорным экраном, когда установлено значение |
slide |
строка | логический | false |
Автоматически отображает карусель после того, как пользователь вручную перебирает первый элемент. Если «карусель», автоматически воспроизводит карусель при загрузке. |
wrap |
логический | true |
Должна ли карусель работать непрерывно или иметь жесткие остановки. |
touch |
логический | true |
Должна ли карусель поддерживать взаимодействие смахивания влево / вправо на устройствах с сенсорным экраном. |
Методы
Вы можете создать экземпляр карусели с помощью конструктора карусели, например, для инициализации с дополнительными параметрами и начала циклического перебора элементов:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
| Метод | Описание |
|---|---|
cycle |
Перебирает элементы карусели слева направо. |
pause |
Останавливает карусель от циклического перебора элементов. |
prev |
Переход к предыдущему элементу. Возврат к вызывающей стороне до того, как будет показан предыдущий элемент (например, до того, как slid.bs.carouselпроизойдет событие). |
next |
Переход к следующему элементу. Возврат к вызывающему абоненту до того, как будет показан следующий элемент (например, до того, как slid.bs.carouselпроизойдет событие). |
nextWhenVisible |
Циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву). Возврат к вызывающей стороне до того, как будет показан целевой элемент (например, до того, как slid.bs.carouselпроизойдет событие). |
dispose |
Уничтожает карусель элемента. |
getInstance |
Статический метод, позволяющий получить экземпляр карусели, связанный с элементом DOM. |
События
Класс карусели Bootstrap предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства:
direction: Направление, в котором движется карусель (либо,"left"либо"right").relatedTarget: Элемент DOM, который вставляется в качестве активного элемента.from: Индекс текущего элементаto: Индекс следующего элемента
Все события карусели запускаются в самой карусели (то есть в <div class="carousel">).
| Тип события | Описание |
|---|---|
slide.bs.carousel |
Срабатывает немедленно при slideвызове метода экземпляра. |
slid.bs.carousel |
Запускается, когда карусель завершает переход между слайдами. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
Изменить продолжительность перехода
Продолжительность перехода .carousel-item можно изменить с помощью $carousel-transition переменной Sass перед компиляцией или пользовательских стилей, если вы используете скомпилированный CSS. Если применяется несколько переходов, убедитесь, что сначала определен переход преобразования (например transition: transform 2s ease, opacity .5s ease-out).
В Bootstrap 4, как и в Bootstrap 3, существует стандартный JS-компонент Carousel (карусель или слайдер). Этот компонент предназначен для циклического пролистывания изображений или другого контента.
В этой статье мы рассмотрим такие вопросы, связанные с созданием, форматированием и кастомизацией слайдера (карусели) в Bootstrap-4.
- Разметка шаблона
- Управление каруселью с помощью стрелок
- Управление каруселью с помощью индикаторов
- Слайдер с заголовками и надписями
- Слайдер с эффектом исчезновения (fade)
- Использование классов сетки Bootstrap-4
- Затемнение изображений для слайдеров
- Слайдер для отзывов на странице
- Кастомизация стрелок
- Отображение слайдера по клику на кнопке (ссылке)
- Отключаем прокручивание карусели Bootstrap-4
Разметка шаблона
Работа карусели предусматривает использование CSS3 3D трансформаций вместе с JS-кодом. Поэтому для того, чтобы подключить компонент карусели, необходимо, чтобы в разметке вашего html-файла обязательно были подключены не только bootstrap.css, но и jQuery, и bootstrap.min.js. Popper.js вы можете не подключать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html lang=«en»> <head> <meta charset=«utf-8»> <meta name=«viewport» content=«width=device-width, initial-scale=1, shrink-to-fit=no»> <!— Bootstrap CSS —> <link rel=«stylesheet» href=«https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css» integrity=«sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS» crossorigin=«anonymous»> <title>Пример Bootstrap—4 слайдера</title> </head> <body> <h1>Пример Bootstrap—4 слайдера</h1> <!— здесь будет код слайдера —> <!— подключение JavaScript —> <!— Сначала jQuery, затем Bootstrap JS, а Popper.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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js» integrity=«sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k» crossorigin=«anonymous»></script> </body> </html> |
Сам код слайдера предполагает, что вы добавляете ряд изображений. Каждое изображение находится в <div class="carousel-item">. Обязательно для одного из таких div-ов (чаще всего для первого) задать класс active, чтобы слайдер отобразился.Если вы этого не сделаете, слайдер не будет показан на странице.
Для того чтобы изображения подгонялись под размер контейнера, официальная документация рекомендует добавить классы d-block и w-100.
Управление каруселью с помощью стрелок
Эти изображения можно перелистывать с помощью стрелок, которые добавляются в нижнюю часть карусели в виде ссылок с классами carousel-control-prev и carousel-control-next.
Важным моментом здесь является использование id слайдера в атрибуте href тега <a class="carousel-control-prev"> и <a class="carousel-control-next">. В примере ниже id слайдера sliderBigImages, и в атрибуте href записан код href="#sliderBigImages":
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id=«sliderBigImages» class=«carousel slide» data—ride=«carousel»> <div class=«carousel-inner»> <div class=«carousel-item active»> <img src=«nature/01.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/02.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/03.jpg» class=«d-block w-100» alt=«Природа»> </div> </div> <a class=«carousel-control-prev» href=«#sliderBigImages» role=«button» data—slide=«prev»> <span class=«carousel-control-prev-icon» aria—hidden=«true»></span> <span class=«sr-only»>Previous</span> </a> <a class=«carousel-control-next» href=«#sliderBigImages» role=«button» data—slide=«next»> <span class=«carousel-control-next-icon» aria—hidden=«true»></span> <span class=«sr-only»>Next</span> </a> </div> |
Если id слайдера и href ссылки будут отличаться, перелистывание не сработает.
Пример такой карусели:
Управление каруселью с помощью индикаторов
Для слайдера вы можете добавить управление с помощью индикаторов, которые выглядят, как небольшие полоски внизу слайдера. Можно добавить их как вместе со стрелками, так и как самостоятельный элемент управления. Индикаторы создаются с помощью нумерованного списка с классом "carousel-indicators". В каждом элементе <li> этого списка нужно добавить атрибут data-slide-to="цифра" (цифры начинаются с 0). Количество элементов <li> должно совпасть с количеством слайдов. Тот элемент, который показывается первым, имеет class="active".
Например, вы можете использовать такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id=«skySlider» class=«carousel slide» data—ride=«carousel»> <ol class=«carousel-indicators»> <li data—target=«#skySlider» data—slide—to=«0» class=«active»></li> <li data—target=«#skySlider» data—slide—to=«1»></li> <li data—target=«#skySlider» data—slide—to=«2»></li> </ol> <div class=«carousel-inner»> <div class=«carousel-item active»> <img src=«nature/041.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/042.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/043.jpg» class=«d-block w-100» alt=«Природа»> </div> </div> <a class=«carousel-control-prev» href=«#skySlider» role=«button» data—slide=«prev»> <span class=«carousel-control-prev-icon» aria—hidden=«true»></span> <span class=«sr-only»>Previous</span> </a> <a class=«carousel-control-next» href=«#skySlider» role=«button» data—slide=«next»> <span class=«carousel-control-next-icon» aria—hidden=«true»></span> <span class=«sr-only»>Next</span> </a> </div> |
Как и при управлении стрелками, необходимо связать id слайдера с атрибутом data-target каждого элемента <li>. В примере выше id="skySlider" слайдера использован в data-target="#skySlider".
Ниже вы найдете 2 примера слайдера с индикаторами. Код этих примеров можно скопировать, нажав на заголовке.
Тестировать пример в новой вкладке.
Слайдер с заголовками и надписями
Для большей информативности вы можете использовать специальный блок с заголовками и надписями в своем слайдере. Для этого предназначен класс .carousel-caption. Размещать его следует внутри <div class="carousel-item"> для тех слайдов, которые должно сопровождать описание. Bootstrap-4 рекомендует вставить такой код:
|
<div class=«carousel-item»> <img src=«…» alt=«…»> <div class=«carousel-caption d-none d-md-block»> <h5>...</h5> <p>...</p> </div> </div> |
Обратите внимание на классы утилит отображения d-none и d-md-block, которые будут скрывать надписи (d-none) для всех экранов, кроме средних и больших (d-md-block).
В примере ниже для заголовков разных слайдов использованы теги <h2>, <h3> и рекомендуемый <h5>, чтобы вы могли увидеть разницу в размерах текста. В реальном слайдере, как правило, вы будете создавать одинаковую разметку для всех изображений-слайдов.
Слайдер с эффектом исчезновения (fade)
Обычно слайдер имеет эффект перелистывания. Однако Bootstrap-4 позволяет создать карусель со сменой изображений с постепенным исчезновением (fade). Для этого нужно добавить класс class="carousel slide carousel-fade" для основного div-а с каруселью. Код слайдера в этом случае выглядит таким образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id=«sliderFade» class=«carousel slide carousel-fade» data—ride=«carousel»> <ol class=«carousel-indicators»> <li data—target=«#sliderFade» data—slide—to=«0» class=«active»></li> <li data—target=«#sliderFade» data—slide—to=«1»></li> <li data—target=«#sliderFade» data—slide—to=«2»></li> </ol> <div class=«carousel-inner»> <div class=«carousel-item active»> <img src=«nature/020.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/021.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/022.jpg» class=«d-block w-100» alt=«Природа»> </div> </div> <a class=«carousel-control-prev» href=«#sliderFade» role=«button» data—slide=«prev»> <span class=«carousel-control-prev-icon» aria—hidden=«true»></span> <span class=«sr-only»>Previous</span> </a> <a class=«carousel-control-next» href=«#sliderFade» role=«button» data—slide=«next»> <span class=«carousel-control-next-icon» aria—hidden=«true»></span> <span class=«sr-only»>Next</span> </a> </div> |
В примере есть управление как стрелками, так и индикаторами. Примечателен этот пример еще тем, что в нем использованы фото одного размера по ширине, но разные по высоте. Поэтому в какой-то момент слайдер «прыгает», а вместе с ним «прыгает» и контент ниже слайдера. Не стоит использовать такие изображения на реальном сайте. Лучше потратьте время на их обрезку в Photoshop.
Использование классов сетки Bootstrap-4 для размещения карусели (слайдера)
Возможно, вы обратили внимание на то, что слайдеры в разных примерах имеют большие или меньшие отступы. Как правило, слайдер занимает либо вcю ширину страницы, либо «упаковывается» в <div class="container"> для того, чтобы занимать пространство, в котором, как правило, размещаются колонки с основным содержимым сайта, основанного на сетке Bootstrap 4. Например, вы можете использовать такой код:
|
<div class=«container»> <div id=«sliderImages» class=«carousel slide» data—ride=«carousel»> <div class=«carousel-inner»> ... </div> </div> </div> |
Для уменьшения места для слайдера можно использовать классы типа col-lg-* или col-md-*, а также любые другие, основанные на сетке Bootstrap. Например, такая разметка выделит половину пространства контейнера для слайдера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class=«container»> <div class=«row»> <div class=«col-md-6»> <div id=«sliderInner» class=«carousel slide» data—ride=«carousel»> <div class=«carousel-inner»> <div class=«carousel-item active»> <img src=«nature/01.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/02.jpg» class=«d-block w-100» alt=«Природа»> </div> <div class=«carousel-item»> <img src=«nature/03.jpg» class=«d-block w-100» alt=«Природа»> </div> </div> <a class=«carousel-control-prev» href=«#sliderInner» role=«button» data—slide=«prev»> <span class=«carousel-control-prev-icon» aria—hidden=«true»></span> <span class=«sr-only»>Previous</span> </a> <a class=«carousel-control-next» href=«#sliderInner» role=«button» data—slide=«next»> <span class=«carousel-control-next-icon» aria—hidden=«true»></span> <span class=«sr-only»>Next</span> </a> </div> </div> <div class=«col-md-6»> <h2 class=«text-center my-4»>Слайдер внутри <br><div class=«col-md-6»></h2> </div> </div><!— /.row —> </div><!— /.container —> |
Несколько вариантов карусели с разной разметкой и размерами вы можете посмотреть по ссылке в новом окне/вкладке.
Затемнение изображений для слайдеров
Вы, должно быть уже заметили, что элементы управления слайдера и заголовок с текстом имеют по умолчанию белый цвет, поэтому должны хорошо читаться на темном фоне изображений слайдера. Далеко не все изображения имеют достаточный уровень контраста. Поэтому некоторые (а может, и все) картинки для слайдера придется затемнять. Для этой цели мы можем использовать Фотошоп.
В Adobe Photoshop вам нужно сделать такие действия после открытия в нем нужной картинки:
- Создать новый слой с помощью специальной иконки в палитре Слои (Layers, вызывается
клавишей F7, чаще всего находится справа внизу). - Залить его черным цветом (нажмите
клавишу Dна клавиатуре, чтобы сбросить цвета до значения по умолчанию — черного и белого). Для заливки нажмите клавишиALT + Backspace. - Для черного слоя уменьшить значение непрозрачности до 50-70% в зависимости от яркости картинки
- Объединить 2 слоя — черный и исходное изображение (Фон, или Background в Photoshop), нажав
CTRL + E. - Сохранить полученное изображение, нажав
CTRL + S.
Последовательность действий можно также посмотреть на скриншоте.
Использование карусели (слайдера) для раздела отзывов на странице
Довольно часто на посадочных страницах (Landing Page) используют раздел с отзывами клиентов в виде слайдера. Для него можно подключать какой-либо из сторонних плагинов, например, Flexslider, а можно использовать стандартный функционал бутстраповской карусели.
Как правило, в случае форматирования отзывов мы должны вывести фото автора отзыва, его имя и фамилию и текст самого отзыва. Для того чтобы сформировать разметку такого плана, нам не нужны большие изображения с подписями, которые мы рассматривали ранее. Нам нужны небольшие фото людей + текст, который довольно часто нужно разместить сбоку от фото. Поэтому в этом случае имеет смысл использовать классы сетки Bootstrap внутри классов карусели.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<div id=«carouselReviews» class=«carousel slide» data—ride=«carousel»> <ol class=«carousel-indicators»> <li data—target=«#carouselReviews» data—slide—to=«0» class=«active»></li> <li data—target=«#carouselReviews» data—slide—to=«1»></li> <li data—target=«#carouselReviews» data—slide—to=«2»></li> </ol> <div class=«carousel-inner»> <div class=«carousel-item active»> <div class=«row»> <div class=«offset-sm-2 col-sm-3 col-md-2»> <img src=«images/lara.jpg» class=«img-fluid rounded-circle d-block m-auto pb-3» alt=«Лариса Уварова»></div> <div class=«offset-md-1 col-md-5 col-sm-5»> <div class=«review»> Спасибо за быстрый заказ. Отличный сервис. С менеджером было легко и приятно общаться. <div class=«review-author»>Лариса Уварова</div> </div> </div> </div> </div> <div class=«carousel-item»> <div class=«row»> <div class=«offset-sm-2 col-sm-3 col-md-2»> <img src=«images/igor.jpg» class=«img-fluid rounded-circle d-block m-auto pb-3» alt=«Игорь Минаев»></div> <div class=«offset-md-1 col-md-5 col-sm-5»> <div class=«review»> Отличный уровень сервиса. Доставили посылку за пару дней. А цены очень приемлемые за подобную доставку. <div class=«review-author»>Игорь Минаев</div> </div> </div> </div> </div> <div class=«carousel-item»> <div class=«row»> <div class=«offset-sm-2 col-sm-3 col-md-2»> <img src=«images/mila.jpg» class=«img-fluid rounded-circle d-block m-auto pb-3» alt=«Мила Синицина»></div> <div class=«offset-md-1 col-md-5 col-sm-5»> <div class=«review»> Очень понравился товар. Посылка пришла быстро. Заказывыла подруге в подарок. Теперь хочу для себя. <div class=«review-author»> Мила Синицина </div> </div> </div> </div> </div> </div> <a class=«carousel-control-prev» href=«#carouselReviews» role=«button» data—slide=«prev»> <span class=«carousel-control-prev-icon» aria—hidden=«true»></span> <span class=«sr-only»>Previous</span> </a> <a class=«carousel-control-next» href=«#carouselReviews» role=«button» data—slide=«next»> <span class=«carousel-control-next-icon» aria—hidden=«true»></span> <span class=«sr-only»>Next</span> </a> </div> |
На этапе добавления этого кода мы получим такой слайдер:
Можно заметить, что он автоматически пролистывает отзывы клиентов, как и другие карусели Bootstrap-4, но ни стрелок, ни индикаторов, управляющих этим процессом заметить не получится. Вспомним, что по умолчанию они в Bootstrap имеют белый цвет, и тогда становится понятно, что мы просто не видим их на белом фоне body, хотя они существуют на странице. Выход из этой ситуации прост — нужно отредактировать классы для стрелок и индикаторов, заменив белый цвет на черный (или темно-серый, если вам он больше нравится или используется в других местах на странице).
Для кастомизации элементов управления карусели для отзывов запишем такой css-код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.carousel—control—prev—icon { background—image: url(«data:image/svg+xml;charset=utf8,%3Csvg xmlns=’http://www.w3.org/2000/svg’ fill=’%23000′ viewBox=’0 0 8 8’%3E%3Cpath d=’M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z’/%3E%3C/svg%3E»); } .carousel—control—next—icon { background—image: url(«data:image/svg+xml;charset=utf8,%3Csvg xmlns=’http://www.w3.org/2000/svg’ fill=’%23000′ viewBox=’0 0 8 8’%3E%3Cpath d=’M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z’/%3E%3C/svg%3E»); } .carousel—indicators { bottom: —58px; } .carousel—indicators li { background—color: rgba(0, 0, 0, .5); } .carousel—indicators .active { background—color: #000; } |
После этого вы увидите и стрелки, и индикаторы. Обратите внимание на то, что стрелки сформированы с помощью svg-кода. Он был взят из свойств для соответствующих классов из Инспектора свойств (клавиша F12). Для изменения цвета svg-изображения, необходимо поменять параметр fill в свойстве background-image.
Именно это мы и сделали, заменив буквы fff на 000. Такой простой операции достаточно, чтобы стрелки поменяли цвет.
Все приведенное выше вы можете не только посмотреть в примере ниже, но и отредактировать самостоятельно на ресурсе Codepen. Там же вы найдете media-query для преобразования слайдера при уменьшении размеров экрана.
See the Pen Bootstrap 4 Carousel by Elen (@ambassador) on CodePen.18892
Кастомизация стрелок
В предыдущем примере мы увидели, что для стрелок использован код svg-изображения. SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — это и изображение, и код в одном флаконе. Поэтому мы можем самостоятельно нарисовать форму стрелок в любой программе для создания векторной графике (Adobe Illustrator, например, или в Inkscape), а затем сохранить их в формате svg.
Мы создадим в Adobe Illustrator документ размером 45х45px и нарисуем с помощью 2-х линий стрелку. Затем перенесем ее в палитру Экспорт ресурсов и назовем prev. Выбираем для экспорта формат SVG, нажимаем на кнопку «Экспорт» и сохраняем в любую удобную папку.
Код этого файла SVG таков:
|
background—image: url(«data:image/svg+xml,%3Csvg xmlns=’https://www.w3.org/2000/svg’ viewBox=’0 0 25.451 25.451′ fill=’%23000’%3E%3Cpath d=’M20.982.521v2.006L8.57 12.315c-.121.101-.195.251-.195.41s.074.311.195.41l12.412 9.79v2.005a.52.52 0 01-.297.469.519.519 0 01-.549-.061L4.664 13.136a.531.531 0 010-.82L20.136.113a.523.523 0 01.846.408z’/%3E%3C/svg%3E»); |
Используем ресурс URL ecoder for SVG для перевода кода SVG в подходящий для использования в свойстве background-image:
Аналогичным способом сделаем стрелку вправо, отразив по горизонтали первую стрелку в Adobe Illustrator. И тоже преобразуем код файла в URL ecoder for SVG.
Результирующий CSS-код такой:
|
.carousel-control-prev-icon { background-image: url(«data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 25.451 25.451′ fill=’%23000’%3E%3Cpath d=’M20.982.521v2.006L8.57 12.315c-.121.101-.195.251-.195.41s.074.311.195.41l12.412 9.79v2.005a.52.52 0 01-.297.469.519.519 0 01-.549-.061L4.664 13.136a.531.531 0 010-.82L20.136.113a.523.523 0 01.846.408z’/%3E%3C/svg%3E»); } .carousel-control-next-icon { background-image: url(«data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 512.005 512.005′ fill=’%23000’%3E%3Cpath d=’M388.418 240.923L153.751 6.256c-8.341-8.341-21.824-8.341-30.165 0s-8.341 21.824 0 30.165L343.17 256.005 123.586 475.589c-8.341 8.341-8.341 21.824 0 30.165a21.275 21.275 0 0015.083 6.251 21.277 21.277 0 0015.083-6.251l234.667-234.667c8.34-8.34 8.34-21.823-.001-30.164z’/%3E%3C/svg%3E»); } .carousel-control-next-icon, .carousel-control-prev-icon { width: 45px; height: 45px; } |
Итоговый слайдер с отзывами выглядим таким образом:
Отображение слайдера по клику на кнопке (ссылке)
Этот раздел появился благодаря вопросу пользователя по имени Влад. Если вам необходимо, чтобы слайдер был изначально скрыт, стоит воспользоваться по окончании его разметки классом d-none, который в Bootstrap-4 отвечает за скрытие любого блока, т.к. имеет только одно свойство display: none !important:
|
.d-none { display: none !important; } |
Поэтому пользователи не увидят вашей разметки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id=«sliderOnClick» class=«carousel slide d-none» data—ride=«carousel»> <div class=«carousel-inner»> <div class=«carousel-item active»> <img src=«nature/041.jpg» class=«d-block w-100» alt=«Облака в виде сердца»> <div class=«carousel-caption d-none d-sm-block»> <h4>...</h4> <p>...</p> </div> </div> <div class=«carousel-item»> <img src=«nature/042.jpg» class=«d-block w-100» alt=«Еще одно сердце в облаках»> <div class=«carousel-caption d-none d-sm-block»> ... </div> </div> <div class=«carousel-item»> <img src=«nature/044.jpg» class=«d-block w-100» alt=«Горное озеро»> <div class=«carousel-caption d-none d-sm-block»> ... </div> </div> </div> <a class=«carousel-control-prev» href=«#sliderOnClick» 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=«#sliderOnClick» role=«button» data—slide=«next»> <span class=«carousel-control-next-icon» aria—hidden=«true»></span> <span class=«sr-only»>Следующий</span> </a> </div> |
Еще нам понадобится кнопка или ссылка для управления слайдером. В примере мы разместим их 2: одна будет только лишь показывать слайдер, вторая — и показывать, и скрывать.
|
<a href=«#» class=«btn btn-success mb-4 mr-3» id=«showSlider»>Показать слайдер</a> <a href=«#» class=«btn btn-dark mb-4» id=«showHideSlider»>Показать/Скрыть слайдер</a> |
Теперь нужно обратить внимание на то, какие id заданы для слайдера (#sliderOnClick) и для каждой из кнопок-ссылок (#showSlider и #showHideSlider), а также вспомнить, что слайдер является компонентом-плагином jQuery, а в арсенале этой JS- библиотеки есть такие простые и замечательные методы, как removeClass() и toggleClass(). Поэтому следующим шагом будет размещение тегов <script> с нашим кодом после тех, которые рекомендованы Bootstrap-4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!— подключение JavaScript —> <!— Сначала jQuery, затем Bootstrap JS, а Popper.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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js» integrity=«sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k» crossorigin=«anonymous»></script> <!— Наш jQuery код —> <script> $(‘#showSlider’).on(‘click’, function() { $(‘#sliderOnClick’).removeClass(‘d-none’); }); $(‘#showHideSlider’).on(‘click’, function() { $(‘#sliderOnClick’).toggleClass(‘d-none’); }); </script> |
Поскольку мы записываем код перед закрывающим тегом <body>, нет необходимости помещать код в функцию $(document).ready().
Смотрим и тестируем, что получилось (открыть в новой вкладке):
Отключаем прокручивание карусели Bootstrap-4
По умолчанию карусель в Bootstrap прокручивается автоматически. Это здорово, когда вы рекламируете какие-то продукты или сообщаете об акциях. Однако для портфоло ваших работ прокручивание вряд ли подойдет.
Остановить этот процесс можно добавлением атрибута data-interval="false" в родительский элемент карусели. Например, так:
|
<div id=«galleryCarousel» class=«carousel slide» data—ride=«carousel» data—interval=«false»> <div class=«carousel-inner»> <div class=«carousel-item active»> ... </div> <div class=«carousel-item»> ... </div> <div class=«carousel-item»> ... </div> </div> </div> |
Ссылки на документацию Bootstrap:
- на английском
- на русском
Просмотров: 7 506
![Bootstrap 4 Carousel: How To Change Arrow Colors? [2 Methods]](https://azmind.com/wp-content/uploads/2020/11/bootstrap-carousel-change-arrow-colors.jpg "Bootstrap 4 Carousel: How To Change Arrow Colors? [2 Methods]"){kind=icon}
What is “carousel-control-prev-icon” in Bootstrap, you might ask?
Well, if you have worked with Bootstrap carousels you probably know that this, along with “carousel-control-next-icon”, are the classes used for the small arrow icons of the carousel’s controls.
But what do I need them for, you might continue?
Well, you will need them if you want to change the colors of the arrow icons.
Today in this tutorial we will do just that, with 2 different methods.
Let’s see these 2 methods and in the end, you can download the templates as usual.
Introduction
We will use Bootstrap version 4.5.3 here, and as I said we will see two ways of changing the arrows’ colors which are:
- the SVG method – we will change the fill color of the SVG shape as I did in the Bootstrap lightbox gallery tutorial here;
- the “Font Icons” method – we will use font icons instead of SVG shapes. In this case, I’ve used Font Awesome but you can use any font you prefer.
So let’s begin with the first method.
Method 1: Using SVG shapes
Below you can see a preview image of how our carousel will look like (click on the image to view it full size).
The HTML
Let’s see the HTML code of our carousel (file “index.html”). I will not show the code of the other parts of the page.
<!-- Top content -->
<div class="top-content">
<!-- Carousel -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/slides/slide-img-1.jpg" class="d-block w-100" alt="slide-img-1">
<div class="carousel-caption">
<h1>Carousel: Change Arrow Colors</h1>
<div class="carousel-caption-description">
<p>How to Change the Arrow Colors of Carousel Controls in Bootstrap 4</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slides/slide-img-2.jpg" class="d-block w-100" alt="slide-img-2">
<div class="carousel-caption">
<h3>Caption for Image 2</h3>
<div class="carousel-caption-description">
<p>This is the caption description text for image 2.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slides/slide-img-3.jpg" class="d-block w-100" alt="slide-img-3">
<div class="carousel-caption">
<h3>Caption for Image 3</h3>
<div class="carousel-caption-description">
<p>This is the caption description text for image 3.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slides/slide-img-4.jpg" class="d-block w-100" alt="slide-img-4">
<div class="carousel-caption">
<h3>Caption for Image 4</h3>
<div class="carousel-caption-description">
<p>This is the caption description text for image 4.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End carousel -->
</div>
As you can see, we have a simple full-width carousel with images, captions, controls, and indicators, created by following the documentation of the Bootstrap carousel component.
The CSS
Now let’s change the controls’ arrow colors with some CSS code (file “style.css”, folder “/assets/css/”). I’ll show only the relevant parts of the CSS code.
.top-content .carousel-control-prev-icon {
width: 40px;
height: 40px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23c593d8' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.top-content .carousel-control-next-icon {
width: 40px;
height: 40px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23c593d8' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}
We have to just change the fill color of the SVG shapes used as background images.
We can do this by changing the fill value here: “fill=’%23c593d8′“. The last 6 digits, in this case “c593d8” are used to specify the color as a hexadecimal number.
I have also increased the size of the arrows so you can better see the color change. I have used a width and height of 40 pixels.
Next, we change the color of the indicators to match the style of the controls’ arrows.
.top-content .carousel-indicators li {
width: 16px;
height: 16px;
margin-left: 5px;
margin-right: 5px;
background-color: #c593d8;
border-radius: 50%;
}
– – – –
Don’t miss: Bootstrap 4 Carousel Fullscreen: How To + Template
Method 2: Using Font Icons
First, the preview image (click on it to view it full size).
The HTML
Here we have a smaller carousel created with the code below. I have used a smaller carousel on purpose, so we have some space to place the controls outside of it, on the left and right.
<!-- Top content -->
<div class="top-content">
<div class="container">
<div class="row">
<div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<!-- Carousel -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/slides/slide-img-1.jpg" class="d-block w-100" alt="slide-img-1">
<div class="carousel-caption">
<h1>Carousel: Change Arrow Colors</h1>
<div class="carousel-caption-description">
<p>How to Change the Arrow Colors of Carousel Controls in Bootstrap 4</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slides/slide-img-2.jpg" class="d-block w-100" alt="slide-img-2">
<div class="carousel-caption">
<h3>Caption for Image 2</h3>
<div class="carousel-caption-description">
<p>This is the caption description text for image 2.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slides/slide-img-3.jpg" class="d-block w-100" alt="slide-img-3">
<div class="carousel-caption">
<h3>Caption for Image 3</h3>
<div class="carousel-caption-description">
<p>This is the caption description text for image 3.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slides/slide-img-4.jpg" class="d-block w-100" alt="slide-img-4">
<div class="carousel-caption">
<h3>Caption for Image 4</h3>
<div class="carousel-caption-description">
<p>This is the caption description text for image 4.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
<i class="fas fa-arrow-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End carousel -->
</div>
</div>
</div>
</div>
It is very similar to the first one. We just use a container, a row, and columns, to make it smaller by following the specifications of the Bootstrap layout and its Grid system.
As already mentioned, we use an Icon Font for the arrows, in this case, Font Awesome.
For example, like this:
<i class="fas fa-arrow-left" aria-hidden="true"></i>
You can see the available icons here.
I have also added “aria-hidden=true” for accessibility.
The CSS
Having our arrow icons outside the image slider, and on a white background, we need to give them a dark color.
We do this very easily with some CSS code, just like we would have done with any “normal” font.
.top-content .carousel-control-prev {
left: -110px;
border-bottom: 0;
font-size: 40px;
color: #444;
}
.top-content .carousel-control-next {
right: -110px;
border-bottom: 0;
font-size: 40px;
color: #444;
}
We use a “#444” value for the color and a font-size of 40 pixels.
You can also see how we place the controls outside the carousel by using negative left and right positions.
CSS Media Queries
I have used some CSS Media Queries to adjust the look of the carousel on smaller devices.
I will not show it here, but you can find it in the file “media-queries.css” (folder “/assets/css/”).
Demo, Download and License
VIEW DEMO: METHOD 1 – METHOD 2
DOWNLOAD:
Bootstrap Carousel Change Arrow Colors (780 downloads)
LICENSE:
You can use these templates as you like, in personal or commercial projects. Just do not sell them “as is”.
Conclusion
Sometimes in our day to day development work, we tend to waste time over small things more than we’d like, like changing the colors of some small arrows in Bootstrap projects 😉 .
Hopefully, this quick tutorial will help you avoid that.
Let me know in the comments if you have any questions.
Stay Updated
Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:
Subscribe
To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.
In this tutorial, we’ll work with another exciting Bootstrap extension. Specifically, we’ll build a Bootstrap carousel component and customize its indicators to look like animated progress bars. In that way, we’ll have a clear view of when the next slide is about to load.
Our Bootstrap Carousel Extension
Here’s what we’ll be creating:
1. Create a Bootstrap Carousel With Indicators
Assuming that we’ve installed the required Bootstrap files, we’ll first construct an image carousel (images from Unsplash) with indicators, by taking advantage of the basic code for the carousel component that the framework provides us.
Here’s the necessary code:
1 |
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false"> |
2 |
<div class="carousel-indicators"> |
3 |
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"> |
4 |
<span></span>
|
5 |
</button>
|
6 |
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"> |
7 |
<span></span>
|
8 |
</button>
|
9 |
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"> |
10 |
<span></span>
|
11 |
</button>
|
12 |
</div>
|
13 |
<div class="carousel-inner"> |
14 |
<div class="carousel-item active"> |
15 |
<img src="bs-carousel1.jpg" class="d-block w-100" alt="..."> |
16 |
</div>
|
17 |
<div class="carousel-item"> |
18 |
<img src="bs-carousel2.jpg" class="d-block w-100" alt="..."> |
19 |
</div>
|
20 |
<div class="carousel-item"> |
21 |
<img src="bs-carousel3.jpg" class="d-block w-100" alt="..."> |
22 |
</div>
|
23 |
</div>
|
24 |
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> |
25 |
<span class="carousel-control-prev-icon" aria-hidden="true"></span> |
26 |
<span class="visually-hidden">Previous</span> |
27 |
</button>
|
28 |
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> |
29 |
<span class="carousel-control-next-icon" aria-hidden="true"></span> |
30 |
<span class="visually-hidden">Next</span> |
31 |
</button>
|
32 |
</div>
|
Pay attention to two things:
- We add the
data-bs-pause="false"attribute to prevent pausing the carousel when we hover over it. - We add an empty
spanelement to each carousel indicator. That will behave as our progress bar.
2. Customize the Bootstrap Indicators
As a next step, we’ll customize the default indicators styling. We’ll make them bigger and absolutely position their span on top of it. Initially, the spans will have zero-width. That width will increase gradually as soon as the corresponding slide becomes active.
Here are the associated styles:
1 |
.carousel-indicators [data-bs-target] { |
2 |
position: relative; |
3 |
width: 60px; |
4 |
height: 6px; |
5 |
border: none; |
6 |
border-radius: 24px; |
7 |
}
|
8 |
|
9 |
.carousel-indicators [data-bs-target] span { |
10 |
content: ’’; |
11 |
position: absolute; |
12 |
top: 0; |
13 |
left: 0; |
14 |
width: 0; |
15 |
height: 100%; |
16 |
background: #7952b3; |
17 |
border-radius: inherit; |
18 |
}
|
3. Create a Progress Element for Each Slide
When the page loads or a slide changes, the fillCarouselIndicator() function will fire.
This function will receive as a parameter the active slide. Initially, we’ll consider the first slide to be the active one.
Inside it, we’ll do the following things:
- Run a function every 50ms whose job will be to gradually animate the
spanwidth of the active indicator up to 100%. - Initially, set the width of all
spans to zero and cancel the execution of the scheduled call (if any). We do this as a precaution in case we decide to change a slide earlier than Bootstrap’s default autoplay behavior (every 5000ms).
With all the above in mind, here’s the associated code:
1 |
...
|
2 |
|
3 |
function fillCarouselIndicator(index) { |
4 |
let i = 0; |
5 |
// 2
|
6 |
for (const carouselIndicator of carouselIndicators) { |
7 |
carouselIndicator.style.width = 0; |
8 |
}
|
9 |
clearInterval(intervalID); |
10 |
|
11 |
// 1
|
12 |
intervalID = setInterval(function () { |
13 |
i++; |
14 |
myCarousel.querySelector(".carousel-indicators .active span").style.width = |
15 |
i + "%"; |
16 |
}, 50); |
17 |
}
|
By default, the carousel component changes the active slide every 5000ms. To synchronize this behavior with our code, the function inside the setInterval() method should run every 50ms. Normally, its last call is when the value of the i variable is set to 100 (100 * 50 = 5000). If, for some reason, you want to change the predefined time needed for cycling between slides, remember, also, to modify the given interval time accordingly. For example, if you set the carousel’s interval time to 6000, you have to give 60 as the second parameter of our interval method.
Accuracy?
If you have ever worked with JavaScript timers (setTimeout(), setInterval()), you might have seen that they aren’t always accurate. Besides, they can behave differently across various browsers/devices.
In my testing, our example worked fine in browsers like Chrome and Edge, but on Firefox, the next slide was revealing while the active indicator had a width of around 80%.
So, let’s perform a simple fix to ensure browser compatibility. More specifically, we’ll add three things:
- First, we’ll get a reference for our carousel. That will give us the ability to use its API methods.
- Then, each time a slide changes, we’ll pause the carousel.
- Finally, we’ll force navigation to the next slide as soon as the
spanwidth of the active indicator becomes 100%. With this addition, thedata-bs-pause="false"attribute that we added earlier won’t play any role, so feel free to remove it if you want.
Here’s the extra JavaScript code needed for this functionality:
1 |
// 1
|
2 |
const carousel = new bootstrap.Carousel(myCarousel); |
3 |
|
4 |
function fillCarouselIndicator(index) { |
5 |
...
|
6 |
// 2
|
7 |
carousel.pause(); |
8 |
|
9 |
intervalID = setInterval(function () { |
10 |
...
|
11 |
|
12 |
if (i >= 100) { |
13 |
// 3
|
14 |
carousel.next(); |
15 |
}
|
16 |
}, 50); |
17 |
}
|
Instead of the slide.bs.carousel event that we used here, you could use the slid.bs.carousel one as well. In such a case, you have to customize the code a little bit.
Conclusion
That’s it, folks! During this short exercise, we learned how to create unique Bootstrap carousels by converting their indicators into animated progress bars.
Hopefully, you found this technique beneficial and plan to incorporate it in one of your upcoming projects.
Once again, here’s what we built:
If you want to expand your Bootstrap knowledge, be sure to look at the constantly evolving Bootstrap resources here at Tuts+.
As always, thanks a lot for reading!
Bootstrap Templates on Envato Elements
Did you find this post useful?
George Martsoukos
George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (Tuts+, SitePoint, LottieFiles, Scotch, Awwwards). He loves anything related to the Web and he is addicted to learning new technologies every day.
I am using a white background for a Carousel using Bootstrap 4.0 and would like to change the color of the controls. It seems that bootstrap now uses SVG for their carousel icons. This means altering the attributes directly does not work.
I am currently using Font Awesome for other elements on the site as well, so if there is a way to use fa-chevrons and format those instead, and it will still behave the same regarding resizing and formatting, that could be an effective solution as well.
Here is my current code for the control elements:
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
I found a similar question here but was not able to make sense of the answer provided there.
I also found this page on GitHub but was not able to make any of the answers there work for me either.
asked Mar 20, 2018 at 18:03
2
There’s no need for any unnecessary css hacks.
If you want to modify any Bootstrap css (or the carousel control colors in particular), you can easily do that.
Here are the rules that control the color of the carousel controls:
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
Replace the fff in the fill='%23fff' parts with the hex code of the desired color.
Here’s a working code snippet where fill='%23fff' has been replaced with fill='%23f00' for red instead of white:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
</style>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/800/400/animals" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>answered Mar 20, 2018 at 18:39
WebDevBoosterWebDevBooster
14.5k9 gold badges68 silver badges70 bronze badges
5
Just insert your own icon inside the carousel-control-next & carousel-control-prev class. For example, I want to change the prev & next icon with Font-Awesome icons. I can do this:
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<!-- INSERT MY OWN PREV ICON USING FONT AWESOME -->
<i style="font-size: 60px" class="fas fa-arrow-alt-circle-left"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<!-- INSERT MY OWN NEXT ICON USING FONT AWESOME -->
<i style="font-size: 60px" class="fas fa-arrow-alt-circle-right"></i>
<span class="sr-only">Next</span>
</a>
Hope it solve your problem
answered Aug 15, 2019 at 9:00
