Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
in English

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.

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.

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

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.

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

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.carouselwystąpieniem zdarzenia).
next Przechodzi do następnego elementu. Wraca do dzwoniącego przed wyświetleniem następnej pozycji (np. przed slid.bs.carouselwystą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.carouselwystą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 slidewywoł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...
})