В этой статье рассмотрим как на страницу, к которой подключён Bootstrap 3 или 4 версии, добавить карусель или слайдер. Содержимое слайдов карусели может быть разнообразным: текстовым, в виде изображения или другого контента.

Что такое карусель?

Carousel (карусель) – это элемент интерфейса для демонстрации на сайте серии изображений (слайдов). Каждое изображение (слайд) демонстрируется обычно несколько секунд, пока не сменится следующим. Смена изображения (слайда) может осуществляться как автоматически через равные промежутки времени, так и вручную.

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

Карусель с анимацией появления (Bootstrap 4)

Добавьте к карусели класс 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 Carousel - Пример работы с событиями

Пример работы с событиями карусели в Bootstrap 3:

Открыть пример

Изменение длительности перехода (Bootstrap 4)

Длительность перехода элементов .carousel-item может быть изменена с помощью Sass переменной $carousel-transition перед компиляцией или пользовательскими стилями, если используете уже скомпилированный CSS. Если применяете несколько переходов, то выполните сначала transition transform (например: transform 2.5s ease, opacity .75s ease-out).