Учебники

Bootstrap — Карусель Плагин

Октябрь 25, 2018

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

Если вы хотите включить функциональность этого плагина индивидуально, вам понадобится 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>

использование

  • Через атрибуты данных — используйте атрибуты данных, чтобы легко контролировать положение карусели.

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

    • Используйте data-slide-to, чтобы передать необработанный индекс слайдов в карусель data-slide-to = «2» , который сдвигает позицию слайда в конкретный индекс, начинающийся с 0.

    • Атрибут data-ride = «carousel» используется для обозначения карусели как анимации, начинающейся при загрузке страницы.

  • С помощью JavaScript — Карусель может быть вызвана вручную с помощью JavaScript, как показано ниже —

Через атрибуты данных — используйте атрибуты данных, чтобы легко контролировать положение карусели.

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

Используйте data-slide-to, чтобы передать необработанный индекс слайдов в карусель data-slide-to = «2» , который сдвигает позицию слайда в конкретный индекс, начинающийся с 0.

Атрибут data-ride = «carousel» используется для обозначения карусели как анимации, начинающейся при загрузке страницы.

С помощью JavaScript — Карусель может быть вызвана вручную с помощью JavaScript, как показано ниже — 

$('.carousel').carousel()

Опции

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

Название варианта Тип / Значение по умолчанию Имя атрибута данных Описание
интервал Номер по умолчанию — 5000 Данные интервала Время задержки между автоматическими циклами элемента. Если ложь, карусель не будет автоматически зацикливаться.
Пауза Строка По умолчанию — «hover» данная пауза Приостанавливает циклическое вращение карусели в мышином центре и возобновляет циклическое вращение карусели в мышином отпуске.
заворачивать логическое значение по умолчанию — 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
})

пример

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

52
Share: