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.).
prefers-reduced-motion
zapytania 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ę .active
należy dodać do jednego ze slajdów, inaczej karuzela nie będzie widoczna. Pamiętaj też, aby ustawić unikatowe id
dla .carousel
opcjonalnych elementów sterujących, zwłaszcza jeśli używasz wielu karuzeli na jednej stronie. Elementy kontrolne i wskaźnikowe muszą mieć data-target
atrybut (lub href
dla linków), który odpowiada id
elementowi .carousel
.
Tylko slajdy
Oto karuzela tylko ze slajdami. Zwróć uwagę na obecność obrazów .d-block
i .w-100
na 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. Zalecamy używanie <button>
elementów, ale możesz też używać <a>
elementów z role="button"
.
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Z podpisami
Łatwo dodawaj podpisy do slajdów za pomocą .carousel-caption
elementu 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-none
i 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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Przenikanie
Dodaj .carousel-fade
do karuzeli, aby animować slajdy z przejściem zanikania zamiast slajdu. W zależności od zawartości karuzeli (np. slajdy zawierające tylko tekst) możesz chcieć dodać .bg-body
niestandardowe CSS do .carousel-item
s, aby uzyskać prawidłowe przenikanie.
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
Interwał indywidualny
Dodaj data-interval=""
do a, .carousel-item
aby 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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Wyłącz przesuwanie po dotknięciu
Karuzele obsługują przesuwanie w lewo/prawo na urządzeniach z ekranem dotykowym, aby przechodzić między slajdami. Można to wyłączyć za pomocą data-touch
atrybutu. Poniższy przykład również nie zawiera data-ride
atrybutu i data-interval="false"
nie odtwarza się automatycznie.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Stosowanie
Poprzez atrybuty danych
Użyj atrybutów danych, aby łatwo kontrolować pozycję karuzeli. data-slide
akceptuje słowa kluczowe prev
lub next
, co zmienia pozycję slajdu w stosunku do jego aktualnej pozycji. Możesz też użyć , data-slide-to
aby 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 false , 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 Na urządzeniach obsługujących dotyk, gdy jest ustawione na |
jeździć | strunowy | fałszywy | Automatycznie odtwarza karuzelę po ręcznym przełączeniu przez użytkownika pierwszego elementu. Jeśli jest ustawiona na 'carousel' , 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 object
i 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.carousel
wystąpieniem zdarzenia).
.carousel('prev')
Przechodzi do poprzedniej pozycji. Powraca do dzwoniącego przed wyświetleniem poprzedniego elementu (tj. przed slid.bs.carousel
wystąpieniem zdarzenia).
.carousel('next')
Przechodzi do następnego elementu. Powraca do dzwoniącego przed wyświetleniem następnej pozycji (tj. przed slid.bs.carousel
wystąpieniem zdarzenia).
.carousel('dispose')
Niszczy karuzelę elementu.
.carousel('nextWhenVisible')
Nie przełączaj karuzeli do następnej, gdy strona nie jest widoczna lub karuzela lub jej element nadrzędny nie jest widoczny. Powraca do dzwoniącego przed wyświetleniem następnej pozycji (tj. przed slid.bs.carousel
wystąpieniem zdarzenia).
.carousel('to')
Przełącza karuzelę do określonej klatki (na podstawie 0, podobnie do tablicy). Powraca do dzwoniącego przed wyświetleniem następnej pozycji (tj. przed slid.bs.carousel
wystąpieniem zdarzenia).
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 pozycjito
: 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 slide wywoł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-item
można zmienić za pomocą $carousel-transition
zmiennej 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
).