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.).
prefers-reduced-motion
medijskom 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 .active
treba dodati na jedan od slajdova inače vrtuljak neće biti vidljiv. Također obavezno postavite jedinstvenu id
za .carousel
opcionalne kontrole, posebno ako koristite više vrteški na jednoj stranici. Kontrolni i indikatorski elementi moraju imati data-bs-target
atribut (ili href
za veze) koji odgovara id
elementu .carousel
.
Samo slajdovi
Evo vrteške samo sa slajdovima. Obratite pažnju na prisustvo .d-block
i .w-100
na karusel slikama da biste sprečili podrazumevano poravnanje slika u pretraživaču.
<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"
.
<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.
<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>
Sa natpisima
Jednostavno dodajte natpise svojim slajdovima pomoću .carousel-caption
elementa 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-none
i vraćamo ih na uređaje srednje veličine pomoću .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>
Crossfade
Dodajte .carousel-fade
na vrtuljak da biste animirali slajdove s prijelazom izblijeđivanja umjesto slajda.
<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-item
da promijenite količinu vremena za odgodu između automatskog prelaska na sljedeću stavku.
<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-touch
atributa. Primjer ispod također ne uključuje data-bs-ride
atribut i ima data-bs-interval="false"
tako da se ne reproducira automatski.
<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>
Tamna varijanta
Dodajte .carousel-dark
u .carousel
za tamnije kontrole, indikatore i natpise. Kontrole su invertirane od njihove zadane bijele ispune sa filter
CSS svojstvom. Naslovi i kontrole imaju dodatne Sass varijable koje prilagođavaju color
i 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>
Prilagođena tranzicija
Trajanje prijelaza .carousel-item
se može promijeniti pomoću $carousel-transition-duration
varijable 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
$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);
Upotreba
Preko atributa podataka
Koristite atribute podataka za laku kontrolu položaja vrtuljka. data-bs-slide
prihvaća ključne riječi prev
ili next
, što mijenja položaj slajda u odnosu na njegovu trenutnu poziciju. Alternativno, koristite data-bs-slide-to
za 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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Opcije
Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-bs-
, kao u data-bs-interval=""
.
Ime | Tip | Default | Opis |
---|---|---|---|
interval |
broj | 5000 |
Količina vremena za odgodu između automatskog ciklusa stavke. Ako false je , vrtuljak se neće automatski kretati. |
keyboard |
boolean | true |
Da li vrtuljak treba da reaguje na događaje na tastaturi. |
pause |
string | boolean | 'hover' |
Ako je postavljeno na Na uređajima s omogućenim dodirom, kada je postavljeno na |
ride |
string | boolean | false |
Automatski reproducira vrtuljak nakon što korisnik ručno okrene prvu stavku. Ako je postavljeno na 'carousel' , automatski reproducira vrtuljku pri učitavanju. |
wrap |
boolean | true |
Da li ringišpil treba da kruži neprekidno ili da se teško zaustavlja. |
touch |
boolean | true |
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 .
Možete kreirati instancu vrtuljka s konstruktorom vrtuljka, na primjer, da biste ga inicijalizirali dodatnim opcijama i započeli kruženje kroz stavke:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metoda | Opis |
---|---|
cycle |
Kruži kroz stavke vrteške s lijeva na desno. |
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.carousel događaj dogodi). |
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.carousel dogodi 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 |
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.carousel dogodi događaj). |
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) |
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 svoje mjesto kao aktivna stavka.from
: Indeks trenutne stavketo
: Indeks sljedeće stavke
Svi događaji vrteške se aktiviraju na samom vrtuljku (tj. na <div class="carousel">
).
Vrsta događaja | Opis |
---|---|
slide.bs.carousel |
Aktivira se odmah kada slide se pozove metoda instance. |
slid.bs.carousel |
Pokreće se kada vrtuljak završi svoj prijelaz slajdova. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})