in English

Carousel

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

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.

Na kraju, ako gradite naš JavaScript iz izvora, on zahtijevautil.js .

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

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

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

Sa indikatorima

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

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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 sakrivamo .d-nonei vraćamo ih na uređaje srednje veličine pomoću .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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 s tekstom), možda ćete htjeti dodati .bg-bodyili neki prilagođeni CSS u .carousel-items radi pravilnog unakrsnog zatamnjivanja.

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

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

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-touchatributa. Primjer ispod također ne uključuje data-rideatribut i ima data-interval="false"tako da se ne reproducira automatski.

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

Upotreba

Preko atributa podataka

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

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

Preko JavaScripta

Ručno pozovite vrtuljak pomoću:

$('.carousel').carousel()

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-interval="".

Ime Tip Default Opis
interval broj 5000 Količina vremena za odgodu između automatskog ciklusa stavke. Ako falseje , vrtuljak se neće automatski kretati.
tastatura boolean tačno Da li vrtuljak treba da reaguje na događaje na tastaturi.
pauza string | boolean 'lebdjeti'

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. Imajte na umu da je ovo dodatak gore navedenom ponašanju miša.
ride string false Automatski reproducira vrtuljak nakon što korisnik ručno okrene prvu stavku. Ako je postavljeno na 'carousel', automatski reproducira vrtuljku pri učitavanju.
zamotati boolean tačno Da li ringišpil treba da kruži neprekidno ili da se teško zaustavlja.
dodir boolean tačno Treba li karusel podržavati interakcije prevlačenja lijevo/desno na uređajima s ekranom osjetljivim na dodir.

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 .

.carousel(options)

Inicijalizira vrtuljak s opcijskim opcijama objecti počinje se kretati kroz stavke.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Kruži kroz stavke vrteške s lijeva na desno.

.carousel('pause')

Zaustavlja vrtuljku da se kreće kroz stavke.

.carousel(number)

Kruži vrtuljak do određenog okvira (na bazi 0, slično nizu). Vraća se pozivaocu prije nego što je ciljna stavka prikazana (tj. prije nego što se slid.bs.carouseldogodi događaj).

.carousel('prev')

Prelazi na prethodnu stavku. Vraća se pozivaocu prije nego što je prikazana prethodna stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('next')

Prelazi na sljedeću stavku. Vraća se pozivaocu prije nego što je prikazana sljedeća stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('dispose')

Uništava vrtuljak elementa.

.carousel('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 što je prikazana sljedeća stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('to')

Kruži vrtuljak do određenog okvira (na bazi 0, slično nizu). Vraća se pozivaocu prije nego što je prikazana sljedeća stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

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
slide.bs.carousel Ovaj događaj se aktivira odmah kada slidese pozove metoda instance.
slid.bs.carousel Ovaj događaj se pokreće kada vrtuljak završi svoj prijelaz slajdova. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Promijenite trajanje prijelaza

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