Bootstrap - wtyczka Carousel

Karuzela Bootstrap to elastyczny, responsywny sposób dodawania suwaka do witryny. Oprócz tego, że jest responsywna, treść jest na tyle elastyczna, że pozwala na umieszczanie obrazów, ramek iframe, filmów lub dowolnego typu treści, które chcesz.

Jeśli chcesz dołączyć tę funkcję wtyczki indywidualnie, będziesz potrzebować rozszerzenia carousel.js. W przeciwnym razie, jak wspomniano w rozdziale Przegląd wtyczek Bootstrap , możesz dołączyć plik bootstrap.js lub zminimalizowany plik bootstrap.min.js .

Przykład

Poniższy prosty pokaz slajdów przedstawia ogólny komponent służący do przechodzenia między elementami, takimi jak karuzela, za pomocą wtyczki karuzeli Bootstrap. Aby zaimplementować karuzelę, wystarczy dodać kod ze znacznikami. Nie ma potrzeby stosowania atrybutów danych, wystarczy prosty program oparty na klasach.

<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>

Opcjonalne napisy

Możesz łatwo dodawać podpisy do slajdów za pomocą .carousel-caption element w dowolnym .item. Umieść w nim dowolny opcjonalny kod HTML, a zostanie on automatycznie wyrównany i sformatowany. Poniższy przykład demonstruje to -

<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>

Stosowanie

Via data attributes - Używaj atrybutów danych, aby łatwo kontrolować położenie karuzeli.
- Atrybut data-slideakceptuje słowa kluczowe prev lub next , co zmienia położenie slajdu w stosunku do jego aktualnej pozycji.
- Posługiwać się data-slide-to przekazać surowy indeks slajdu do karuzeli data-slide-to = "2", który przesuwa pozycję slajdu do określonego indeksu zaczynającego się od 0.
- Plik data-ride = "carousel" atrybut służy do oznaczania karuzeli jako animacji rozpoczynającej się w momencie wczytywania strony.
Via JavaScript - Karuzelę można wywołać ręcznie za pomocą JavaScript, jak poniżej -

$('.carousel').carousel()

Opcje

Istnieją pewne opcje, które można przekazać za pomocą atrybutów danych lub JavaScript, które są wymienione w poniższej tabeli -

Nazwa opcji	Typ / wartość domyślna	Nazwa atrybutu danych	Opis
interwał	liczba Domyślnie - 5000	interwał danych	Czas opóźnienia między automatycznymi cyklami elementu. Jeśli fałsz, karuzela nie będzie się automatycznie przełączać.
pauza	ciąg Domyślnie - „najedź”	pauza danych	Wstrzymuje cyklowanie karuzeli w mouseenter i wznawia cykle karuzeli w mouseleave.
owinąć	boolean Default - true	zawijanie danych	Czy karuzela powinna poruszać się w sposób ciągły, czy też mieć twarde zatrzymania.

Metody

Oto lista przydatnych metod, których można używać z kodem karuzeli.

metoda	Opis	Przykład
.carousel (opcje)	Inicjuje karuzelę za pomocą opcjonalnego obiektu opcji i zaczyna przechodzić między elementami.	`$('#identifier').carousel({ interval: 2000 })`
.carousel ('cykl')	Przechodzi między elementami karuzeli od lewej do prawej.	`$('#identifier').carousel('cycle')`
.carousel ('pauza')	Zatrzymuje karuzelę przed przełączaniem elementów.	`$('#identifier')..carousel('pause')`
.carousel (liczba)	Przełącza cyklicznie karuzelę do określonej klatki (opartej na 0, podobnie do tablicy).	`$('#identifier').carousel(number)`
.carousel ('prev')	Przechodzi do poprzedniej pozycji.	`$('#identifier').carousel('prev')`
.carousel („następny”)	Przechodzi do następnej pozycji.	`$('#identifier').carousel('next')`

Przykład

Poniższy przykład demonstruje użycie metod -

<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>

Wydarzenia

Klasa karuzeli Bootstrap uwidacznia dwa zdarzenia do podłączenia do funkcji karuzeli, które są wymienione w poniższej tabeli.

Zdarzenie	Opis	Przykład
slide.bs.carousel	To zdarzenie jest wywoływane natychmiast po wywołaniu metody wystąpienia slajdu.	`$('#identifier').on('slide.bs.carousel', function () { // do something })`
slid.bs.carousel	To zdarzenie jest uruchamiane, gdy karuzela zakończy przejście slajdu.	`$('#identifier').on('slid.bs.carousel', function () { // do something })`

Przykład

Poniższy przykład demonstruje użycie zdarzeń -

<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>