Karusel

Komponenta dijaprojekcije za kruženje kroz elemente—slike ili slajdove teksta—poput vrtuljka.

Na ovoj stranici

Kako radi

Vrtuljak je dijaprojekcija za kruženje kroz niz sadržaja, izgrađen pomoću CSS 3D transformacija i malo JavaScripta. Radi s nizom slika, teksta ili prilagođenih oznaka. Također uključuje podršku za prethodne/sljedeće kontrole i indikatore.

U preglednicima u kojima je podržan API za vidljivost stranice , vrtuljak će izbjeći klizanje kada web stranica nije vidljiva korisniku (kao što je kartica preglednika neaktivna, prozor preglednika minimiziran itd.).

Učinak animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak smanjenog kretanja u našoj dokumentaciji o pristupačnosti .

Imajte na umu da ugniježđeni vrtuljci nisu podržani, a vrtuljci općenito nisu u skladu sa standardima pristupačnosti.

Primjer

Vrtuljci ne normaliziraju automatski dimenzije slajdova. Kao takvi, možda ćete trebati koristiti dodatne pomoćne programe ili prilagođene stilove za odgovarajuću veličinu sadržaja. Iako vrtuljci podržavaju prethodne/sljedeće kontrole i indikatore, oni nisu izričito potrebni. Dodajte i prilagodite kako vam odgovara.

Klasu .activeje potrebno dodati na jedan od slajdova inače vrtuljak neće biti vidljiv. Također svakako postavite jedinstveno idna .carouselza neobavezne kontrole, posebno ako koristite više karusela na jednoj stranici. Kontrolni i indikatorski elementi moraju imati data-bs-targetatribut (ili hrefza veze) koji odgovara idelementu .carousel.

Samo slajdovi

Ovdje je vrtuljak samo s toboganima. Obratite pozornost na prisutnost .d-blocki .w-100na vrtuljku kako biste spriječili zadano poravnanje slike preglednika.

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>

S kontrolama

Dodavanje prethodnih i sljedećih kontrola. Preporučujemo korištenje <button>elemenata, ali također možete koristiti <a>elemente s 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>

S indikatorima

Također možete dodati indikatore na vrtuljak, uz kontrole.

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>

S natpisima

Lako dodajte opise svojim slajdovima pomoću .carousel-captionelementa unutar bilo kojeg .carousel-item. Oni se mogu lako sakriti na manjim okvirima za prikaz, kao što je prikazano u nastavku, uz dodatne pomoćne programe za prikaz . U početku ih skrivamo pomoću .d-none, a vraćamo ih na uređajima srednje veličine pomoću .d-md-block.

Oznaka prvog slajda

Neki reprezentativni sadržaj rezerviranog mjesta za prvi slajd.

Oznaka drugog slajda

Neki reprezentativni sadržaj rezerviranog mjesta za drugi slajd.

Oznaka trećeg slajda

Neki reprezentativni sadržaj rezerviranog mjesta za treći slajd.

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>

Prijelaz

Dodajte .carousel-fadena svoj vrtuljak da biste animirali slajdove s prijelazom koji blijedi umjesto slajda. Ovisno o vašem sadržaju na vrtuljku (npr. slajdovi samo s tekstom), možda ćete htjeti dodati .bg-bodyili neki prilagođeni CSS u .carousel-items radi pravilnog prelamanja.

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>

Individualni `.carousel-item`interval

Dodajte data-bs-interval=""u a .carousel-itemda biste promijenili količinu vremena za odgodu između automatskog prelaska na sljedeću stavku.

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>

Onemogući prevlačenje dodirom

Vrtuljci podržavaju klizanje lijevo/desno na uređajima sa zaslonom osjetljivim na dodir za pomicanje između slajdova. Ovo se može onemogućiti pomoću data-bs-touchatributa. Primjer u nastavku također ne uključuje data-bs-rideatribut pa se ne pokreće automatski.

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>

Tamna varijanta

Dodajte .carousel-darkza .carouseltamnije kontrole, indikatore i natpise. Kontrole su obrnute u odnosu na zadanu bijelu ispunu sa filterCSS svojstvom. Opisi i kontrole imaju dodatne Sass varijable koje prilagođavaju colori background-color.

Oznaka prvog slajda

Neki reprezentativni sadržaj rezerviranog mjesta za prvi slajd.

Oznaka drugog slajda

Neki reprezentativni sadržaj rezerviranog mjesta za drugi slajd.

Oznaka trećeg slajda

Neki reprezentativni sadržaj rezerviranog mjesta za treći slajd.

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>

Prilagođeni prijelaz

Trajanje prijelaza .carousel-itemmože se promijeniti pomoću $carousel-transition-durationvarijable Sass prije kompajliranja ili prilagođenih stilova ako koristite kompajlirani CSS. Ako se primjenjuje više prijelaza, provjerite je li najprije definiran prijelaz transformacije (npr transition: transform 2s ease, opacity .5s ease-out. ).

Sass

Varijable

Varijable za sve karusele:

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

Varijable za tamni vrtuljak :

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

Korištenje

Preko atributa podataka

Koristite atribute podataka za jednostavnu kontrolu položaja vrtuljka. data-bs-slideprihvaća ključne riječi previli next, koje mijenjaju položaj slajda u odnosu na trenutni položaj. Alternativno, koristite data-bs-slide-toza prosljeđivanje sirovog indeksa slajda na vrtuljak data-bs-slide-to="2", koji pomiče položaj slajda na određeni indeks koji počinje s 0.

Atribut data-bs-ride="carousel"se koristi za označavanje vrtuljka kao animiranog koji počinje pri učitavanju stranice. Ako ne koristite data-bs-ride="carousel"za inicijalizaciju vrtuljka, morate ga sami inicijalizirati. Ne može se koristiti u kombinaciji sa (suvišnom i nepotrebnom) eksplicitnom JavaScript inicijalizacijom istog vrtuljka.

Preko JavaScripta

Pozovite karusel ručno pomoću:

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

Mogućnosti

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Ime	Tip	Zadano	Opis
`interval`	broj	`5000`	Količina vremena za odgodu između automatskog mijenjanja stavke.
`keyboard`	Booleov	`true`	Treba li vrtuljak reagirati na događaje tipkovnice.
`pause`	niz, booleov	`"hover"`	Ako je postavljeno na `"hover"`, pauzira kruženje vrtuljka na `mouseenter`i nastavlja kruženje vrtuljka na `mouseleave`. Ako je postavljeno na `false`, lebdeći pokazivač iznad vrtuljka neće ga pauzirati. Na uređajima s omogućenim dodirom, kada je postavljeno na `"hover"`, ciklus će se pauzirati `touchend`(nakon što korisnik završi s interakcijom s vrtuljkom) u dva intervala, prije nego što se automatski nastavi. Ovo je dodatak ponašanju miša.
`ride`	niz, booleov	`false`	Ako je postavljeno na `true`, automatski pokreće vrtuljak nakon što korisnik ručno kruži prvom stavkom. Ako je postavljeno na `"carousel"`, automatski pokreće vrtuljak pri učitavanju.
`touch`	Booleov	`true`	Treba li vrtuljak podržavati interakcije prelaska lijevo/desno na uređajima sa zaslonom osjetljivim na dodir.
`wrap`	Booleov	`true`	Treba li vrtuljak kružiti kontinuirano ili se oštro zaustavljati.

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija .

Možete stvoriti instancu vrtuljka pomoću konstruktora vrtuljka, na primjer, za inicijalizaciju s dodatnim opcijama i početak kruženja kroz stavke:

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

metoda	Opis
`cycle`	Kruži kroz stavke vrtuljka slijeva nadesno.
`dispose`	Uništava karusel elementa. (Uklanja pohranjene podatke na DOM elementu)
`getInstance`	Statička metoda koja vam omogućuje da dobijete instancu vrtuljka pridruženu DOM elementu, možete je koristiti ovako: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Statička metoda koja vraća instancu vrtuljka pridruženu DOM elementu ili stvara novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Prelazak na sljedeću stavku. Vraća se pozivatelju prije nego što se prikaže sljedeća stavka (npr. prije nego se `slid.bs.carousel`dogodi događaj).
`nextWhenVisible`	Ne prelazite na sljedeću rotirajuću stranicu kada stranica nije vidljiva ili rotirajući izbornik ili njegov roditelj nisu vidljivi. Vraća se pozivatelju prije nego što je ciljna stavka prikazana .
`pause`	Zaustavlja vrtuljak da kruži kroz stavke.
`prev`	Ciklusi na prethodnu stavku. Vraća se pozivatelju prije nego što se prikaže prethodna stavka (npr. prije nego se `slid.bs.carousel`dogodi događaj).
`to`	Vrti vrtuljak na određeni okvir (na temelju 0, slično nizu). Vraća se pozivatelju prije nego što je ciljna stavka prikazana (npr. prije nego što se `slid.bs.carousel`događaj dogodi).

Događaji

Bootstrapova klasa vrtuljka izlaže dva događaja za spajanje na funkciju vrtuljka. Oba događaja imaju sljedeća dodatna svojstva:

direction: Smjer u kojem vrtuljak klizi (ili "left"ili "right").
relatedTarget: DOM element koji se stavlja na mjesto kao aktivna stavka.
from: Indeks trenutne stavke
to: Indeks sljedeće stavke

Svi događaji na vrtuljku pokreću se na samom vrtuljku (tj. na <div class="carousel">).

Vrsta događaja	Opis
`slid.bs.carousel`	Pokreće se kada vrtuljak završi prijelaz slajdova.
`slide.bs.carousel`	Odmah se aktivira kada `slide`se pozove metoda instance.

const myCarousel = document.getElementById('myCarousel')

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

Karusel

Kako radi

Primjer

Samo slajdovi

S kontrolama

S indikatorima

S natpisima

Oznaka prvog slajda

Oznaka drugog slajda

Oznaka trećeg slajda

Prijelaz

Individualni .carousel-iteminterval

Onemogući prevlačenje dodirom

Tamna varijanta

Oznaka prvog slajda

Oznaka drugog slajda

Oznaka trećeg slajda

Prilagođeni prijelaz

Sass

Varijable

Korištenje

Preko atributa podataka

Preko JavaScripta

Mogućnosti

Metode

Asinkrone metode i prijelazi

Događaji

Individualni `.carousel-item`interval