Karuzela

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

Na tej stronie

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.

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ć unikatowe iddla .carouselopcjonalnych elementów sterujących, zwłaszcza jeśli używasz wielu karuzeli na jednej stronie. Elementy kontrolne i wskaźnikowe muszą mieć data-bs-targetatrybut (lub hrefdla linków), który odpowiada idelementowi .carousel.

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.

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

html

<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Ze wskaźnikami

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

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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

Niektóre reprezentatywne treści zastępcze dla pierwszego slajdu.

Etykieta drugiego slajdu

Niektóre reprezentatywne treści zastępcze dla drugiego slajdu.

Etykieta trzeciego slajdu

Niektóre reprezentatywne treści zastępcze dla trzeciego slajdu.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Przenikanie

Dodaj .carousel-fadedo 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-bodyniestandardowe CSS do .carousel-items, aby uzyskać prawidłowe przenikanie.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

`.carousel-item`Interwał indywidualny

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

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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-bs-touchatrybutu. Poniższy przykład również nie zawiera data-bs-rideatrybutu, więc nie jest odtwarzany automatycznie.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Wariant ciemny

Dodaj .carousel-darkdo .carouselciemniejszych elementów sterujących, wskaźników i podpisów. Kontrolki zostały odwrócone od ich domyślnego białego wypełnienia za pomocą filterwłaściwości CSS. Podpisy i kontrolki mają dodatkowe zmienne Sass, które dostosowują colori background-color.

Etykieta pierwszego slajdu

Niektóre reprezentatywne treści zastępcze dla pierwszego slajdu.

Etykieta drugiego slajdu

Niektóre reprezentatywne treści zastępcze dla drugiego slajdu.

Etykieta trzeciego slajdu

Niektóre reprezentatywne treści zastępcze dla trzeciego slajdu.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Niestandardowe przejście

Czas trwania przejścia .carousel-itemmożna zmienić za pomocą $carousel-transition-durationzmiennej 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. ).

Sass

Zmienne

Zmienne dla wszystkich karuzeli:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Zmienne dla ciemnej karuzeli :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Stosowanie

Poprzez atrybuty danych

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

data-bs-ride="carousel"Atrybut służy do oznaczania karuzeli jako animowanej od momentu załadowania strony . Jeśli nie używasz data-bs-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ą:

const carousel = new bootstrap.Carousel('#myCarousel')

Opcje

Ponieważ opcje mogą być przekazywane przez atrybuty danych lub JavaScript, możesz dołączyć nazwę opcji do data-bs-, jak w data-bs-animation="{value}". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z „ camelCase ” na „ kebab-case ” podczas przekazywania opcji przez atrybuty danych. Na przykład użyj data-bs-custom-class="beautifier"zamiast data-bs-customClass="beautifier".

Od wersji Bootstrap 5.2.0 wszystkie komponenty obsługują eksperymentalny atrybut zarezerwowanych danych data-bs-config, który może zawierać prostą konfigurację komponentu w postaci ciągu JSON. Gdy element ma atrybuty data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", ostateczną titlewartością będzie, 456a oddzielne atrybuty danych zastąpią wartości podane w data-bs-config. Ponadto istniejące atrybuty danych mogą zawierać wartości JSON, takie jak data-bs-delay='{"show":0,"hide":150}'.

Nazwa	Rodzaj	Domyślna	Opis
`interval`	numer	`5000`	Czas opóźnienia między automatycznym cyklem elementu.
`keyboard`	logiczne	`true`	Czy karuzela powinna reagować na zdarzenia na klawiaturze.
`pause`	ciąg, wartość logiczna	`"hover"`	Jeśli ustawione na `"hover"`, wstrzymuje cykliczne włączanie karuzeli `mouseenter`i 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. Jest to dodatek do zachowania myszy.
`ride`	ciąg, wartość logiczna	`false`	Jeśli jest ustawiona na `true`, karuzela jest odtwarzana automatycznie po ręcznym przełączeniu przez użytkownika pierwszego elementu. Jeśli jest ustawiona na `"carousel"`, karuzela jest automatycznie odtwarzana przy wczytywaniu.
`touch`	logiczne	`true`	Czy karuzela powinna obsługiwać interakcje z przesunięciem w lewo/w prawo na urządzeniach z ekranem dotykowym.
`wrap`	logiczne	`true`	Czy karuzela powinna pracować w sposób ciągły, czy też powinna mieć ostre zatrzymania.

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 .

Możesz utworzyć instancję karuzeli za pomocą konstruktora karuzeli, na przykład w celu zainicjowania z dodatkowymi opcjami i rozpoczęcia przechodzenia między elementami:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

metoda	Opis
`cycle`	Przechodzi przez elementy karuzeli od lewej do prawej.
`dispose`	Niszczy karuzelę elementu. (Usuwa dane zapisane w elemencie DOM)
`getInstance`	Metoda statyczna, która pozwala uzyskać instancję karuzeli powiązaną z elementem DOM, możesz jej użyć w następujący sposób: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Metoda statyczna, która zwraca instancję karuzeli powiązaną z elementem DOM lub tworzy nową, jeśli nie została zainicjowana. Możesz go użyć tak: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Przechodzi do następnego elementu. Powraca do dzwoniącego przed wyświetleniem następnej pozycji (np. przed `slid.bs.carousel`wystąpieniem zdarzenia).
`nextWhenVisible`	Nie przełączaj karuzeli do następnej, gdy strona nie jest widoczna lub karuzela lub jej element nadrzędny nie jest widoczny. Wraca do dzwoniącego przed wyświetleniem elementu docelowego .
`pause`	Zatrzymuje karuzelę przed przechodzeniem przez elementy.
`prev`	Przechodzi do poprzedniej pozycji. Powraca do dzwoniącego przed wyświetleniem poprzedniego elementu (np. przed `slid.bs.carousel`wystąpieniem zdarzenia).
`to`	Przełącza karuzelę do określonej klatki (na podstawie 0, podobnie do tablicy). Powraca do dzwoniącego przed wyświetleniem elementu docelowego (np. 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 pozycji
to: Indeks następnej pozycji

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

Typ wydarzenia	Opis
`slid.bs.carousel`	Uruchamiany, gdy karuzela zakończy przejście slajdu.
`slide.bs.carousel`	Uruchamiany natychmiast po `slide`wywołaniu metody wystąpienia.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Karuzela

Jak to działa

Przykład

Tylko slajdy

Z kontrolkami

Ze wskaźnikami

Z podpisami

Etykieta pierwszego slajdu

Etykieta drugiego slajdu

Etykieta trzeciego slajdu

Przenikanie

.carousel-itemInterwał indywidualny

Wyłącz przesuwanie po dotknięciu

Wariant ciemny

Etykieta pierwszego slajdu

Etykieta drugiego slajdu

Etykieta trzeciego slajdu

Niestandardowe przejście

Sass

Zmienne

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

Opcje

Metody

Metody asynchroniczne i przejścia

Wydarzenia

`.carousel-item`Interwał indywidualny