Bootstrap - Плагин для карусели

: Bootstrap 3; 23 сентября 2018; 03 января 2019; Просмотров: 2526

Bootstrap - Плагин для карусели

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

Содержание:

Дополнительные титры
Применение плагина для карусели
Опции плагина для карусели
События плагина для карусели

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

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

<div id = "myCarousel0" class = "carousel slide myCarousel0">
  
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel0" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel0" data-slide-to = "1"></li>
      <li data-target = "#myCarousel0" data-slide-to = "2"></li>
   </ol>  
  
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/images/slide1.png" alt = "First slide">
      </div>
     
      <div class = "item">
         <img src = "/images/slide2.png" alt = "Second slide">
      </div>
     
      <div class = "item">
         <img src = "/images/slide3.png" alt = "Third slide">
      </div>
   </div>
  
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = ".myCarousel0" data-slide = "prev">‹</a>
   <a class = "carousel-control right" href = ".myCarousel0" data-slide = "next">›</a>
  
</div>

Дополнительные титры

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

<div id = "myCarousel1" class = "carousel slide myCarousel1">
  
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel1" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel1" data-slide-to = "1"></li>
      <li data-target = "#myCarousel1" data-slide-to = "2"></li>
   </ol>  
  
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
     
      <div class = "item">
         <img src = "/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
     
      <div class = "item">
         <img src = "/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = ".myCarousel1" data-slide = "prev">‹</a>
   <a class = "carousel-control right" href = ".myCarousel1" data-slide = "next">›</a>+
</div>

Применение плагина для карусели

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

Опции плагина для карусели

Существуют определенные опции, которые могут передаваться через атрибуты данных или JavaScript, перечислены в следующей таблице -

Название опции	Тип/значение по умолчанию	Имя атрибута данных	Описание
interval	numberDefault − 5000	data-interval	Время задержки для автоматического переключения элемента. Если false, карусель автоматически не будет циклически изменяться.
pause	string По умолчанию - "hover"	data-pause	Приостанавливает цикличность карусели в центре мыши и возобновляет круговое движение карусели на мышах.
wrap	boolean Значение по умолчанию - true	data-wrap	Независимо от того, должна ли карусель непрерывно перемещаться или иметь жесткие остановки.

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

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

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

<div id = "myCarousel2" class = "carousel slide myCarousel2">
  
   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel2" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel2" data-slide-to = "1"></li>
      <li data-target = "#myCarousel2" data-slide-to = "2"></li>
   </ol>  
  
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/images/slide1.png" alt = "First slide">
      </div>
     
      <div class = "item">
         <img src = "/images/slide2.png" alt = "Second slide">
      </div>
     
      <div class = "item">
         <img src = "/images/slide3.png" alt = "Third slide">
      </div>
   </div>
  
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = ".myCarousel2" data-slide = "prev">‹</a>
   <a class = "carousel-control right" href = ".myCarousel2" data-slide = "next">›</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() {
         $("#myCarousel2").carousel('prev');
      });
     
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel2").carousel('next');
      });
     
      // Cycles the carousel to a particular frame
      $(".slide-one").click(function() {
         $("#myCarousel2").carousel(0);
      });
     
      $(".slide-two").click(function() {
         $("#myCarousel2").carousel(1);
      });
     
      $(".slide-three").click(function() {
         $("#myCarousel2").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 = "myCarousel3" class = "carousel slide myCarousel3">
  
   <!-- Carousel indicators -->
   <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>  
  
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/images/slide1.png" alt = "First slide">
      </div>
     
      <div class = "item">
         <img src = "/images/slide2.png" alt = "Second slide">
      </div>
     
      <div class = "item">
         <img src = "/images/slide3.png" alt = "Third slide">
      </div>
   </div>
  
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = ".myCarousel3" data-slide = "prev">‹</a>
   <a class = "carousel-control right" href = ".myCarousel3" data-slide = "next">›</a>
           
</div>
 
<script>
   $(function() {
      $('#myCarousel3').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

Tags: уроки html, сайтостроение, Bootstrap 3

Компьютерапия