Karuzela

Komponent pokazu slajdów do przechodzenia między elementami — obrazami lub slajdami tekstu — jak karuzela.

Jak to działa

Karuzela to pokaz slajdów do przechodzenia przez serię treści, zbudowany z przekształceń CSS 3D i odrobiny JavaScript. Działa z serią obrazów, tekstu lub niestandardowych znaczników. Obejmuje również obsługę poprzednich/następnych kontrolek i wskaźników.

W przeglądarkach, w których obsługiwany jest interfejs API Page Visibility , karuzela będzie unikać przesuwania się, gdy strona internetowa nie jest widoczna dla użytkownika (np. gdy karta przeglądarki jest nieaktywna, okno przeglądarki jest zminimalizowane itp.).

Pamiętaj, że zagnieżdżone karuzele nie są obsługiwane, a karuzele generalnie nie są zgodne ze standardami ułatwień dostępu.

Wreszcie, jeśli budujesz nasz JavaScript ze źródeł, wymagautil.js to .

Przykład

Karuzele nie normalizują automatycznie wymiarów slajdu. W związku z tym może być konieczne użycie dodatkowych narzędzi lub niestandardowych stylów w celu odpowiedniego rozmiaru zawartości. Chociaż karuzele obsługują poprzednie/następne kontrolki i wskaźniki, nie są one wyraźnie wymagane. Dodaj i dostosuj według własnego uznania.

Klasę .activenależy dodać do jednego ze slajdów, inaczej karuzela nie będzie widoczna. Pamiętaj też, aby ustawić unikalny identyfikator .carouseldla opcjonalnych elementów sterujących, zwłaszcza jeśli używasz wielu karuzeli na jednej stronie. Elementy kontrolne i wskaźnikowe muszą mieć data-targetatrybut (lub hrefw przypadku linków), który odpowiada identyfikatorowi .carouselelementu.

Tylko slajdy

Oto karuzela tylko ze slajdami. Zwróć uwagę na obecność obrazów .d-blocki .w-100na karuzeli, aby zapobiec domyślnemu wyrównaniu obrazu przeglądarki.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Z kontrolkami

Dodanie poprzedniej i następnej kontroli:

Poprzedni Następny

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Ze wskaźnikami

Możesz także dodać wskaźniki do karuzeli, obok elementów sterujących.

Poprzedni Następny

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Z podpisami

Łatwo dodawaj podpisy do slajdów za pomocą .carousel-captionelementu w dowolnym .carousel-item. Można je łatwo ukryć w mniejszych rzutniach, jak pokazano poniżej, za pomocą opcjonalnych narzędzi wyświetlania . Początkowo ukrywamy je za pomocą .d-nonei przywracamy na średnich urządzeniach za pomocą .d-md-block.

Etykieta pierwszego slajdu

Nulla vitae elit libero, pharetra augue mollis interdum.

Etykieta drugiego slajdu

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etykieta trzeciego slajdu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Poprzedni Następny

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Przenikanie

Dodaj .carousel-fadedo karuzeli, aby animować slajdy z przejściem zanikania zamiast slajdu.

Poprzedni Następny

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Stosowanie

Poprzez atrybuty danych

Użyj atrybutów danych, aby łatwo kontrolować pozycję karuzeli. data-slideakceptuje słowa kluczowe prevlub next, co zmienia pozycję slajdu w stosunku do jego aktualnej pozycji. Możesz też użyć , data-slide-toaby przekazać nieprzetworzony indeks slajdu do karuzeli data-slide-to="2", co powoduje przesunięcie pozycji slajdu do określonego indeksu zaczynającego się od 0.

data-ride="carousel"Atrybut służy do oznaczania karuzeli jako animowanej od momentu załadowania strony . Nie można jej używać w połączeniu z (nadmiarową i niepotrzebną) jawną inicjalizacją JavaScript tej samej karuzeli.

Przez JavaScript

Wywołaj karuzelę ręcznie za pomocą:

$('.carousel').carousel()

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-interval="".

Metody

.carousel(options)

Inicjuje karuzelę z opcjonalnymi opcjami objecti rozpoczyna przełączanie między elementami.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Przechodzi przez elementy karuzeli od lewej do prawej.

.carousel('pause')

Zatrzymuje karuzelę przed przechodzeniem przez elementy.

.carousel(number)

Przełącza karuzelę do określonej klatki (na podstawie 0, podobnie do tablicy). Powraca do dzwoniącego przed wyświetleniem elementu docelowego (tj. przed slid.bs.carouselwystąpieniem zdarzenia).

.carousel('prev')

Przechodzi do poprzedniej pozycji. Powraca do dzwoniącego przed wyświetleniem poprzedniego elementu (tj. przed slid.bs.carouselwystąpieniem zdarzenia).

.carousel('next')

Przechodzi do następnego elementu. Powraca do dzwoniącego przed wyświetleniem następnej pozycji (tj. przed slid.bs.carouselwystąpieniem zdarzenia).

.carousel('dispose')

Niszczy karuzelę elementu.

Wydarzenia

Klasa karuzeli Bootstrap udostępnia dwa zdarzenia do podłączenia do funkcji karuzeli. Oba zdarzenia mają następujące dodatkowe właściwości:

• direction: kierunek, w którym karuzela się przesuwa (albo "left"lub "right").
• relatedTarget: Element DOM, który jest przesuwany na miejsce jako aktywny element.
• from: Indeks bieżącej pozycji
• to: Indeks następnej pozycji

Wszystkie zdarzenia karuzeli są uruchamiane w samej karuzeli (tj. w <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Zmień czas trwania przejścia

Czas trwania przejścia .carousel-itemmożna zmienić za pomocą $carousel-transitionzmiennej Sass przed kompilacją lub style niestandardowe, jeśli używasz skompilowanego CSS. Jeśli zastosowano wiele przejść, upewnij się, że najpierw zdefiniowano przejście transformacji (np. transition: transform 2s ease, opacity .5s ease-out).