Source

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

Efekt animacji tego komponentu zależy od prefers-reduced-motionzapytania o media. Zobacz zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .

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 src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Z kontrolkami

Dodanie poprzedniej i następnej kontroli:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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.

<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 src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Przenikanie

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

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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>

Dodaj data-interval=""do a, .carousel-itemaby zmienić czas opóźnienia między automatycznym przejściem do następnego elementu.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" 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 . Jeśli nie używasz data-ride="carousel"do inicjalizacji karuzeli, musisz ją zainicjować samodzielnie. 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="".

Nazwa Rodzaj Domyślna Opis
interwał numer 5000 Czas opóźnienia między automatycznym cyklem elementu. Jeśli fałsz, karuzela nie włączy się automatycznie.
klawiatura logiczne PRAWDA Czy karuzela powinna reagować na zdarzenia na klawiaturze.
pauza ciąg | logiczne "unosić się"

Jeśli ustawione na "hover", wstrzymuje cykliczne włączanie karuzeli mouseenteri wznawia cykliczne włączanie karuzeli mouseleave. Jeśli jest ustawiona na false, najechanie kursorem na karuzelę nie zatrzyma jej.

Na urządzeniach obsługujących dotyk, gdy jest ustawione na "hover", jazda na rowerze zostanie wstrzymana touchend(po zakończeniu interakcji użytkownika z karuzelą) na dwa okresy, po czym zostanie automatycznie wznowiona. Zauważ, że jest to dodatek do powyższego zachowania myszy.
jeździć strunowy fałszywy Automatycznie odtwarza karuzelę po ręcznym przełączeniu przez użytkownika pierwszego elementu. W przypadku „karuzeli” karuzela jest automatycznie odtwarzana przy wczytywaniu.
zawinąć logiczne PRAWDA Czy karuzela powinna pracować w sposób ciągły, czy też powinna mieć ostre zatrzymania.
dotykać logiczne PRAWDA Czy karuzela powinna obsługiwać interakcje z przesunięciem w lewo/w prawo na urządzeniach z ekranem dotykowym.

Metody

Metody asynchroniczne i przejścia

Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .

Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji .

.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">).

Typ wydarzenia Opis
slajd.bs.karuzela To zdarzenie jest wyzwalane natychmiast po slidewywołaniu metody wystąpienia.
karuzela.bs To zdarzenie jest uruchamiane, gdy karuzela zakończy przejście slajdu. 
$('#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).