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.

<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 również używać <a>elementów z role="button".

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

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

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

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

<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 i data-bs-interval="false"nie odtwarza się automatycznie.

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

<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 stylów niestandardowych, 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

$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`)

$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żywaj 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 spowoduje 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ą:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Opcje

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

Nazwa	Rodzaj	Domyślna	Opis
`interval`	numer	`5000`	Czas opóźnienia między automatycznym cyklem elementu. Jeśli `false`, karuzela nie włączy się automatycznie.
`keyboard`	logiczne	`true`	Czy karuzela powinna reagować na zdarzenia na klawiaturze.
`pause`	ciąg \| logiczne	`'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. Zauważ, że jest to dodatek do powyższego zachowania myszy.
`ride`	ciąg \| logiczne	`false`	Automatycznie odtwarza karuzelę po ręcznym przełączeniu przez użytkownika pierwszego elementu. Jeśli jest ustawiona na `'carousel'`, karuzela jest odtwarzana automatycznie przy wczytywaniu.
`wrap`	logiczne	`true`	Czy karuzela powinna pracować w sposób ciągły, czy też powinna mieć ostre zatrzymania.
`touch`	logiczne	`true`	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 .

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:

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

metoda	Opis
`cycle`	Przechodzi przez elementy karuzeli od lewej do prawej.
`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).
`next`	Przechodzi do następnego elementu. Wraca 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
`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).
`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ć w ten sposób:`bootstrap.Carousel.getOrCreateInstance(element)`

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
`slide.bs.carousel`	Uruchamiany natychmiast po `slide`wywołaniu metody wystąpienia.
`slid.bs.carousel`	Uruchamiany, gdy karuzela zakończy przejście slajdu.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // 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