Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check
in English

Carousel

Komponenta projekcije slajdova za kretanje kroz elemente—slike ili slajdove teksta—kao vrtuljak.

Na ovoj stranici

Kako radi

Vrteška je projekcija slajdova za kretanje kroz niz sadržaja, izgrađena pomoću CSS 3D transformacija i malo JavaScripta. Radi sa nizom slika, teksta ili prilagođenih oznaka. Takođe uključuje podršku za prethodne/sljedeće kontrole i indikatore.

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

Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak o smanjenom pokretu u našoj dokumentaciji o pristupačnosti .

Imajte na umu da ugniježđene vrtuljke nisu podržane, a vrtuljke općenito nisu u skladu sa standardima pristupačnosti.

Primjer

Vrteške ne normaliziraju automatski dimenzije slajda. Kao takvi, možda ćete morati koristiti dodatne uslužne programe ili prilagođene stilove za odgovarajuću veličinu sadržaja. Dok vrtuljke podržavaju prethodne/sljedeće kontrole i indikatore, oni nisu izričito potrebni. Dodajte i prilagodite kako vam odgovara.

Razred .activetreba dodati na jedan od slajdova inače vrtuljak neće biti vidljiv. Također obavezno postavite jedinstvenu idza .carouselopcionalne kontrole, posebno ako koristite više vrteški na jednoj stranici. Kontrolni i indikatorski elementi moraju imati data-bs-targetatribut (ili hrefza veze) koji odgovara idelementu .carousel.

Samo slajdovi

Evo vrteške samo sa slajdovima. Obratite pažnju na prisustvo .d-blocki .w-100na karusel slikama da biste sprečili podrazumevano poravnanje slika u pretraživaču.

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>

Sa kontrolama

Dodavanje prethodne i sljedeće kontrole. Preporučujemo korištenje <button>elemenata, ali možete koristiti i <a>elemente sa 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>

Sa indikatorima

Takođe možete dodati indikatore na vrtuljak, pored kontrola.

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>

Sa natpisima

Jednostavno dodajte natpise svojim slajdovima pomoću .carousel-captionelementa unutar bilo kojeg .carousel-item. Mogu se lako sakriti na manjim okvirima za prikaz, kao što je prikazano u nastavku, sa opcionim uslužnim programima za prikaz . U početku ih skrivamo pomoću .d-nonei vraćamo ih na uređaje srednje veličine pomoću .d-md-block.

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>

Crossfade

Dodajte .carousel-fadena vrtuljak da biste animirali slajdove s prijelazom izblijeđivanja umjesto slajda. Ovisno o vašem sadržaju vrteške (npr. slajdovi samo za tekst), možda ćete htjeti dodati .bg-bodyili neki prilagođeni CSS u .carousel-items radi pravilnog unakrsnog zatamnjivanja.

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>

Dodajte data-bs-interval=""u a .carousel-itemda promijenite 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

Vrteške podržavaju prevlačenje lijevo/desno na uređajima s ekranom osjetljivim na dodir za kretanje između slajdova. Ovo se može onemogućiti pomoću data-bs-touchatributa. Primjer ispod također ne uključuje data-bs-rideatribut tako da se ne reproducira 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-darku .carouselza tamnije kontrole, indikatore i natpise. Kontrole su invertirane od njihove zadane bijele ispune sa filterCSS svojstvom. Naslovi i kontrole imaju dodatne Sass varijable koje prilagođavaju colori background-color.

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đena tranzicija

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

Sass

Varijable

Varijable za sve vrtuljke:

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

Upotreba

Preko atributa podataka

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

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

Preko JavaScripta

Ručno pozovite vrtuljak pomoću:

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

Opcije

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 tip slučaja naziva opcije iz “ camelCase ” u “ kebab-case ” prilikom prosljeđivanja opcija 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 smjestiti jednostavnu konfiguraciju komponente kao JSON string. 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 će nadjačati vrijednosti date 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 Default Opis
interval broj 5000 Količina vremena za odgodu između automatskog ciklusa stavke.
keyboard boolean true Da li vrtuljak treba da reaguje na događaje na tastaturi.
pause string, boolean "hover" Ako je postavljeno na "hover", pauzira kruženje vrteške na mouseenteri nastavlja ciklus vrteške na mouseleave. Ako je postavljeno na false, zadržavanje pokazivača iznad vrtuljka ga neće pauzirati. Na uređajima s omogućenim dodirom, kada je postavljeno na "hover", biciklizam će se pauzirati touchend(kada korisnik završi interakciju s vrtuljkom) u dva intervala, prije nego što se automatski nastavi. Ovo je dodatak ponašanju miša.
ride string, boolean false Ako je postavljeno na true, automatski reproducira vrtuljku nakon što korisnik ručno izvrši ciklus prve stavke. Ako je postavljeno na "carousel", automatski reproducira vrtuljku pri učitavanju.
touch boolean true Treba li karusel podržavati interakcije prevlačenja lijevo/desno na uređajima s ekranom osjetljivim na dodir.
wrap boolean true Da li ringišpil treba da kruži neprekidno ili da se teško zaustavlja.

Metode

Asinhrone metode i prijelazi

Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .

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

Možete kreirati instancu vrtuljka s konstruktorom vrtuljka, na primjer, da biste ga inicijalizirali dodatnim opcijama i započeli kruženje kroz stavke:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metoda Opis
cycle Kruži kroz stavke vrteške s lijeva na desno.
dispose Uništava vrtuljak elementa. (Uklanja pohranjene podatke na DOM elementu)
getInstance Statička metoda koja vam omogućava 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 kreira novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: bootstrap.Carousel.getOrCreateInstance(element).
next Prelazi na sljedeću stavku. Vraća se pozivaocu prije nego što je prikazana sljedeća stavka (npr. prije nego što se slid.bs.carouseldogodi događaj).
nextWhenVisible Nemojte premještati vrtuljak na sljedeću kada stranica nije vidljiva ili vrtuljak ili njegov roditelj nisu vidljivi. Vraća se pozivaocu prije nego je ciljna stavka prikazana .
pause Zaustavlja vrtuljku da se kreće kroz stavke.
prev Prelazi na prethodnu stavku. Vraća se pozivaocu prije nego što je prikazana prethodna stavka (npr. prije nego što se slid.bs.carouseldogađaj dogodi).
to Kruži vrtuljak do određenog okvira (na bazi 0, slično nizu). Vraća se pozivaocu prije nego što je ciljna stavka prikazana (npr. prije nego što se slid.bs.carouseldogodi događaj).

Događaji

Bootstrapova carousel klasa izlaže dva događaja za spajanje na funkcionalnost vrteške. Oba događaja imaju sljedeća dodatna svojstva:

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

Svi događaji vrteške se aktiviraju na samom vrteškom (tj. na <div class="carousel">).

Vrsta događaja Opis
slid.bs.carousel Pokreće se kada vrtuljak završi svoj prijelaz slajdova.
slide.bs.carousel Aktivira se odmah kada slidese pozove metoda instance. 
const myCarousel = document.getElementById('myCarousel')

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