Bootstrap - плагин карусели

Карусель Bootstrap - это гибкий и отзывчивый способ добавить слайдер на ваш сайт. Помимо гибкости, контент достаточно гибок, чтобы разрешать использование изображений, окон iframe, видео или любого другого типа контента, который вам может понадобиться.

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится carousel.js. В противном случае, как упоминалось в главе Обзор плагинов Bootstrap , вы можете включить bootstrap.js или уменьшенный bootstrap.min.js .

пример

На простом слайд-шоу ниже показан общий компонент для циклического переключения элементов, например карусели, с использованием плагина Bootstrap carousel. Чтобы реализовать карусель, вам просто нужно добавить код с разметкой. Атрибуты данных не нужны, просто разработка на основе классов.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

Дополнительные подписи

Вы можете легко добавлять подписи к слайдам с помощью .carousel-caption элемент в любом .item. Поместите туда практически любой необязательный HTML, и он будет автоматически выровнен и отформатирован. Следующий пример демонстрирует это -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Применение

Via data attributes - Используйте атрибуты данных, чтобы легко контролировать положение карусели.
- Атрибут data-slideпринимает ключевые слова prev или next , которые изменяют положение слайда относительно его текущего положения.
- Использовать data-slide-to передать необработанный индекс слайдов в карусель data-slide-to = "2", который сдвигает положение слайда на определенный индекс, начиная с 0.
- В data-ride = "carousel" Атрибут используется для обозначения карусели как анимации, начинающейся при загрузке страницы.
Via JavaScript - Карусель можно вызвать вручную с помощью JavaScript, как показано ниже -

$('.carousel').carousel()

Параметры

Некоторые параметры, которые можно передать через атрибуты данных или JavaScript, перечислены в следующей таблице:

Название опции	Тип / значение по умолчанию	Имя атрибута данных	Описание
интервал	номер по умолчанию - 5000	интервал данных	Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
Пауза	строка По умолчанию - «наведение»	пауза данных	Приостанавливает цикл карусели на mouseenter и возобновляет цикл карусели на mouseleave.
заворачивать	логическое значение По умолчанию - true	перенос данных	Должна ли карусель работать непрерывно или иметь жесткие остановки.

Методы

Вот список полезных методов, которые можно использовать с кодом карусели.

Метод	Описание	пример
.carousel (варианты)	Инициализирует карусель необязательным объектом параметров и начинает циклический просмотр элементов.	`$('#identifier').carousel({ interval: 2000 })`
.carousel ('цикл')	Перебирает элементы карусели слева направо.	`$('#identifier').carousel('cycle')`
.carousel ('пауза')	Останавливает карусель от циклического перебора элементов.	`$('#identifier')..carousel('pause')`
.carousel (число)	Циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву).	`$('#identifier').carousel(number)`
.carousel ('пред.')	Переход к предыдущему элементу.	`$('#identifier').carousel('prev')`
.carousel ('следующий')	Переход к следующему элементу.	`$('#identifier').carousel('next')`

пример

В следующем примере демонстрируется использование методов -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">            
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>
	
</div> 

<script>
   $(function() {
	
      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });
      
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });
      
      // Cycles the carousel to a particular frame 
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });
      
      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });
      
      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

События

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

Событие	Описание	пример
slide.bs.carousel	Это событие запускается немедленно при вызове метода экземпляра слайда.	`$('#identifier').on('slide.bs.carousel', function () { // do something })`
slid.bs.carousel	Это событие вызывается, когда карусель завершает переход между слайдами.	`$('#identifier').on('slid.bs.carousel', function () { // do something })`

пример

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

<div id = "myCarousel" class = "carousel slide">
   
   <!-- Carousel indicators -->
   <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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>