Карусель 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, перечислены в следующей таблице -

Название опции Тип/значение по умолчанию Имя атрибута данных Описание
intervalnumberDefault − 5000data-intervalВремя задержки для автоматического переключения элемента. Если false, карусель автоматически не будет циклически изменяться.
pausestring По умолчанию - "hover"data-pauseПриостанавливает цикличность карусели в центре мыши и возобновляет круговое движение карусели на мышах.
wrapboolean Значение по умолчанию - truedata-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>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok