Karusel
Komponenta dijaprojekcije za kruženje kroz elemente—slike ili slajdove teksta—poput vrtuljka.
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.).
prefers-reduced-motion
medijskom 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.
Na kraju, ako gradite naš JavaScript iz izvora, to zahtijevautil.js
.
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 .active
je potrebno dodati na jedan od slajdova inače vrtuljak neće biti vidljiv. Također svakako postavite jedinstveno id
na .carousel
za neobavezne kontrole, posebno ako koristite više karusela na jednoj stranici. Kontrolni i indikatorski elementi moraju imati data-target
atribut (ili href
za veze) koji odgovara id
elementu .carousel
.
Samo slajdovi
Ovdje je vrtuljak samo s toboganima. Obratite pozornost na prisutnost .d-block
i .w-100
na vrtuljku kako biste spriječili zadano poravnanje slike preglednika.
<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>
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"
.
<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>
S indikatorima
Također možete dodati indikatore na vrtuljak, uz kontrole.
<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>
S natpisima
Lako dodajte opise svojim slajdovima pomoću .carousel-caption
elementa 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
.
<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>
Prijelaz
Dodajte .carousel-fade
na 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-body
ili neki prilagođeni CSS u .carousel-item
s radi pravilnog prelamanja.
<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>
Individualni .carousel-item
interval
Dodajte data-interval=""
u a .carousel-item
da biste promijenili 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
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-touch
atributa. Primjer u nastavku također ne uključuje data-ride
atribut i ima data-interval="false"
ga tako da se ne pokreće 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>
Korištenje
Preko atributa podataka
Koristite atribute podataka za jednostavnu kontrolu položaja vrtuljka. data-slide
prihvaća ključne riječi prev
ili next
, koje mijenjaju položaj slajda u odnosu na trenutni položaj. Alternativno, koristite data-slide-to
za prosljeđivanje sirovog indeksa slajda na vrtuljak data-slide-to="2"
, koji pomiče položaj slajda na određeni indeks koji počinje s 0
.
Atribut data-ride="carousel"
se koristi za označavanje vrtuljka kao animiranog koji počinje pri učitavanju stranice. Ako ne koristite data-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:
$('.carousel').carousel()
Mogućnosti
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-
, kao u data-interval=""
.
Ime | Tip | Zadano | Opis |
---|---|---|---|
interval | broj | 5000 | Količina vremena za odgodu između automatskog mijenjanja stavke. Ako false je , vrtuljak se neće automatski kretati. |
tipkovnica | Booleov | pravi | Treba li vrtuljak reagirati na događaje tipkovnice. |
pauza | niz | Booleov | 'lebdjeti' | Ako je postavljeno na Na uređajima s omogućenim dodirom, kada je postavljeno na |
vožnja | niz | lažno | 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. |
omotati | Booleov | pravi | Treba li vrtuljak kružiti kontinuirano ili se oštro zaustavljati. |
dodir | Booleov | pravi | Treba li vrtuljak podržavati interakcije prelaska lijevo/desno na uređajima sa zaslonom osjetljivim na dodir. |
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 .
.carousel(options)
Inicijalizira vrtuljak s neobaveznim opcijama object
i počinje kružiti kroz stavke.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Kruži kroz stavke vrtuljka slijeva nadesno.
.carousel('pause')
Zaustavlja vrtuljak da kruži kroz stavke.
.carousel(number)
Vrti vrtuljak na određeni okvir (na temelju 0, slično nizu). Vraća se pozivatelju prije nego što je ciljna stavka prikazana (tj. prije nego što se slid.bs.carousel
događaj dogodi).
.carousel('prev')
Ciklusi na prethodnu stavku. Vraća se pozivatelju prije nego što se prikaže prethodna stavka (tj. prije nego što se slid.bs.carousel
događaj dogodi).
.carousel('next')
Prelazak na sljedeću stavku. Vraća se pozivatelju prije nego što se prikaže sljedeća stavka (tj. prije nego što se slid.bs.carousel
događaj dogodi).
.carousel('dispose')
Uništava karusel elementa.
.carousel('nextWhenVisible')
Ne vraćajte rotirajući izbornik na sljedeću kada stranica nije vidljiva ili rotirajući izbornik ili njegov roditelj nisu vidljivi. Vraća se pozivatelju prije nego što se prikaže sljedeća stavka (tj. prije nego što se slid.bs.carousel
događaj dogodi).
.carousel('to')
Vrti vrtuljak na određeni okvir (na temelju 0, slično nizu). Vraća se pozivatelju prije nego što se prikaže sljedeća stavka (tj. 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 stavketo
: Indeks sljedeće stavke
Svi događaji na vrtuljku pokreću se na samom vrtuljku (tj. na <div class="carousel">
).
Vrsta događaja | Opis |
---|---|
tobogan.bs.vrtuljak | Ovaj događaj aktivira se odmah kada slide se pozove metoda instance. |
slid.bs.vrtuljak | Ovaj događaj se pokreće kada vrtuljak završi prijelaz slajdova. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Promjena trajanja prijelaza
Trajanje prijelaza .carousel-item
može se promijeniti pomoću $carousel-transition
varijable 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
).