На этом уроке Вы узнаете, как создать карусель с помощью Twitter Bootstrap 3

Создание карусели с помощью Twitter Bootstrap 3

Carousel (Карусель) - это слайд-шоу компонент для циклической смены элементов (изображений или текстовых слайдов).

Если страница для пользователя не видима (например, когда вкладка, содержащая карусель неактивна или окно браузера свёрнуто и т.д.), то карусель не будет осуществлять смену слайдов. Это характерно только для браузеров, которые поддерживают Page Visibilty API.

Вложенные карусели в Twitter Boostrap 3 и 4 не поддерживаются.

Следующий пример покажет вам, как создать карусель, состоящую из 3 слайдов, с помощью платформы Twitter Bootstrap:

<!-- Таблица стилей CSS -->
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
</style>

<!-- Карусель -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
  <!-- Индикаторы для карусели -->
  <ol class="carousel-indicators">
    <!-- Перейти к 0 слайду карусели с помощью соответствующего индекса data-slide-to="0" -->
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <!-- Перейти к 1 слайду карусели с помощью соответствующего индекса data-slide-to="1" -->
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <!-- Перейти к 2 слайду карусели с помощью соответствующего индекса data-slide-to="2" -->
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>   
  <!-- Слайды карусели -->
  <div class="carousel-inner">
    <!-- Слайды создаются с помощью контейнера с классом item, внутри которого помещается содержимое слайда -->
    <div class="active item">
      <h2>Слайд №1</h2>
      <div class="carousel-caption">
        <h3>Заголовок 1 слайда</h3>
        <p>Текст (описание) 1 слайда...</p>
      </div>
    </div>
    <!-- Слайд №2 -->
    <div class="item">
      <h2>Slide 2</h2>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
      </div>
    </div>
    <!-- Слайд №3 -->
    <div class="item">
      <h2>Slide 3</h2>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <!-- Навигация для карусели -->
  <!-- Кнопка, осуществляющая переход на предыдущий слайд с помощью атрибута data-slide="prev" -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <!-- Кнопка, осуществляющая переход на следующий слайд с помощью атрибута data-slide="next" -->
  <a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
Bootstrap - Пример карусели с 3 слайдами
Bootstrap - Карусель, состоящая из 3 слайдов

Демонстрация карусели (1)

Управления каруселью с помощью data атрибутов

Twitter Bootstrap позволяет контролировать позицию показываемого слайда карусели с помощью атрибутов data. Пример управления каруселью с помощью этих атрибутов продемонстрировано на примере выше. Теперь давайте рассмотрим какие атрибуты и за что отвечают.

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

Кроме того, вы можете использовать атрибут data-slide-to, чтобы перейти к любому слайду карусели с помощью соответствующего индекса. Например: data-slide-to="1" - для перехода к слайду с индексом 1.

Кроме того, карусель не будет автоматически сменять слайды после загрузки страницы, если не указать атрибут data-ride="carousel".

Управление каруселью с помощью JavaScript

Карусель можно активировать вручную вызвать с помощью кода JavaScript: $('.carousel').carousel(). Данный код состоит из метода .carousel() и идентификатора или класса к которому нужно применить данный метод. На примере выше используется класс .carousel.

Параметры

Есть определенные параметры, которые могут быть переданы методу Bootstrap carousel() для дополнительной настройки карусели:

Имя Тип Значение
по умолчанию
Описание
interval number 5000 Задаёт количество времени в миллисекундах между автоматической сменой слайдов карусели
pause string "hover" Приостанавливает показ слайдов при нахождении курсора мышки в пределах границ и возобновляет показ при нахождении курсора за пределами границ слайда.
wrap boolean true Запрещает непрерывный переход на следующий слайд с последнего слайда (т.е. он должен быть первым) и на предыдущий слайд с первого слайда (т.е. он должен быть последним)

Примечание: Вы также можете установить эти параметры с помощью атрибутов data: data-interval="5000", data-pause="hover".

Методы

Стандартные Bootstrap методы карусели:

Метод Описание Пример
.carousel(options) Инициализирует карусель с дополнительными параметрами и запускает процесс смены слайдов $('#id').carousel({interval: 4000})
.carousel('cycle') Запускает процесс смены слайдов слева направо $('#id').carousel('cycle')
.carousel('pause') Останавливает процесс автоматической смены слайдов карусели $('#id')..carousel('pause')
.carousel(number) Осуществляет переход на определённый слайд карусели, который устанавливается с помощью числа number (отчёт ведётся с 0, по аналогии с массивом) $('#id').carousel(1)
.carousel('prev') Осуществляет переход на предыдущий слайд $('#id').carousel('prev')
.carousel('next') Осуществляет переход на следующий слайд $('#id').carousel('next')

На следующем примере продемонстрируем использование методов для управления каруселью:

<!-- Скрипт на языке JavaScript --> 
<script type="text/javascript">
$(document).ready(function(){
  // Инициализирует карусель
  $(".start-slide").click(function(){
    $("#myCarousel2").carousel('cycle');
  });
  // Останавливает процесс автоматической смены слайдов карусели
  $(".pause-slide").click(function(){
    $("#myCarousel2").carousel('pause');
  });
  // Осуществляет переход на предыдущий слайд
  $(".prev-slide").click(function(){
    $("#myCarousel2").carousel('prev');
  });
  // Осуществляет переход на следующий слайд
  $(".next-slide").click(function(){
    $("#myCarousel2").carousel('next');
  });
  // Осуществляет переход на 0 слайд карусели 
  $(".slide-one").click(function(){
    $("#myCarousel2").carousel(0);
  });
  // Осуществляет переход на 1 слайд карусели 
  $(".slide-two").click(function(){
    $("#myCarousel2").carousel(1);
  });
  // Осуществляет переход на 2 слайд карусели 
  $(".slide-three").click(function(){
    $("#myCarousel2").carousel(2);
  });
});
</script>

<!-- Стили CSS -->
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel2{
	margin: 20px 0;
}
.control-buttons{
	text-align:center;
}
.examplecarusel{
	margin: 20px;
} 
</style>

<!-- HTML код карусели -->
<div class="examplecarusel">
<div id="myCarousel2" class="carousel slide" data-interval="3000" data-ride="carousel">
  <!-- Слайды карусели -->
  <div class="carousel-inner">
    <!-- 1 слайд -->
    <div class="active item">
      <h2>Слайд №1</h2>
      <div class="carousel-caption">
        <h3>Заголовок 1 слайда</h3>
        <p>Описание 1 слайда...</p>
      </div>
    </div>
    <div class="item">
      <h2>Слайд №2</h2>
      <div class="carousel-caption">
        <h3>Заголовок 2 слайда</h3>
        <p>Описание 2 слайда...</p>
      </div>
    </div>
    <div class="item">
      <h2>Слайд №3</h2>
      <div class="carousel-caption">
        <h3>Заголовок 3 слайда</h3>
        <p>Описание 3 слайда...</p>
      </div>
    </div>
  </div>
</div>  
<!-- Кнопки управления -->
<div style="margin-top: 20px; text-align:center;">
  <input type="button" class="btn btn-info start-slide" value="Старт">
  <input type="button" class="btn btn-info pause-slide" value="Пауза">
  <input type="button" class="btn btn-info prev-slide" value="Предыдущий">
  <input type="button" class="btn btn-info next-slide" value="Следующий">
  <input type="button" class="btn btn-info slide-one" value="Слайд 1">
  <input type="button" class="btn btn-info slide-two" value="Слайд 2">            
  <input type="button" class="btn btn-info slide-three" value="Слайд 3">
</div>
Bootstrap - Карусель, управляемая с помощью кнопок
Bootstrap - Пример карусели, управляемой с помощью кнопок

Демонстрация карусели (2)

События

Описание событий для "карусели" приведены в таблице:

Событие Описание Пример
slide.bs.carouse Событие срабатывает перед началом процесса смены слайда $('#id').on('slide.bs.carousel', function () { // сделать что-нибудь... })
slid.bs.carousel Событие срабатывает после процесса смены слайда $('#id').on('slid.bs.carousel', function () { // сделать что-нибудь...})

Следующий пример демонстрирует использование событий:

<div id="myCarousel3" class="carousel slide">
  <!-- Индикаторы карусели -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel3" data-slide-to="1"></li>
    <li data-target="#myCarousel3" data-slide-to="2"></li>
   </ol>   
   <!-- Слайды карусели -->
   <div class="carousel-inner">
     <!-- 1 слайд -->
     <div class="item active">
       <img src="/bootstrap/images/slide1.png" alt="1 слайд">
     </div>
     <!-- 2 слайд -->
     <div class="item">
       <img src="/bootstrap/images/slide2.png" alt="2 слайд">
     </div>
     <!-- 3 слайд -->
     <div class="item">
       <img src="/bootstrap/images/slide3.png" alt="3 слайд">
     </div>
   </div>
   <!-- Система навигации для карусели, с помощью которой осуществляется переход на предыдущий и следующий слайд -->
   <a class="carousel-control left" href="#myCarousel3" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel3" 
      data-slide="next">›</a>
</div> 

<!-- Скрипт на языке JavaScript, который выводит всплывающее сообщение перед началом процесса смены слайда -->
<script>
  $(function(){
    $('#myCarousel3').on('slide.bs.carousel', function () {
      alert("Событие срабатывает перед началом процесса смены слайда.");
    });
  });
</script>