Karuselis
Slaidrādes komponents, lai pārvietotos pa elementiem — attēliem vai teksta slaidiem — piemēram, karuselis.
Kā tas strādā
Karuselis ir slaidrāde, kas paredzēta satura sērijai, kas veidota, izmantojot CSS 3D transformācijas un nedaudz JavaScript. Tas darbojas ar attēlu sēriju, tekstu vai pielāgotu marķējumu. Tas ietver arī atbalstu iepriekšējām/nākamajām vadīklām un indikatoriem.
Pārlūkprogrammās, kurās tiek atbalstīts lapas redzamības API , karuselis izvairīsies no slīdēšanas, kad tīmekļa lapa nav redzama lietotājam (piemēram, ja pārlūkprogrammas cilne ir neaktīva, pārlūkprogrammas logs ir minimizēts utt.).
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Lūdzu, ņemiet vērā, ka ligzdotie karuseļi netiek atbalstīti, un karuseļi parasti neatbilst pieejamības standartiem.
Piemērs
Karuseļi automātiski nenormalizē slaidu izmērus. Tādējādi, iespējams, jums būs jāizmanto papildu utilītas vai pielāgoti stili, lai pielāgotu satura lielumu. Lai gan karuseļi atbalsta iepriekšējās/nākamās vadīklas un indikatorus, tie nav īpaši pieprasīti. Pievienojiet un pielāgojiet pēc saviem ieskatiem.
Klase .active
jāpievieno vienam no slaidiem, pretējā gadījumā karuselis nebūs redzams. Noteikti iestatiet arī unikālu opciju id
izvēles .carousel
vadīklām, it īpaši, ja vienā lapā izmantojat vairākus karuseļus. Vadības un indikatora elementiem ir jābūt data-bs-target
atribūtam (vai href
saitēm), kas atbilst id
elementa atribūtam .carousel
.
Tikai slaidi
Šeit ir karuselis tikai ar slaidiem. Ņemiet vērā, ka uz karuseļa attēliem ir .d-block
un .w-100
, lai novērstu pārlūkprogrammas noklusējuma attēla līdzināšanu.
<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>
Ar vadības ierīcēm
Pievienojot iepriekšējo un nākamo vadīklu. Mēs iesakām izmantot <button>
elementus, taču varat arī izmantot <a>
elementus ar 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>
Ar indikatoriem
Varat arī pievienot indikatorus karuselim līdzās vadības ierīcēm.
<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>
Ar parakstiem
Vienkārši pievienojiet parakstus saviem slaidiem, izmantojot .carousel-caption
elementu jebkurā .carousel-item
. Tos var viegli paslēpt mazākos skata portos, kā parādīts tālāk, izmantojot papildu displeja utilītas . Sākotnēji mēs tos paslēpām, izmantojot .d-none
un atkal ievietojam vidēja izmēra ierīcēs, izmantojot .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
Pievienojiet .carousel-fade
savam karuselim, lai animētu slaidus ar izbalēšanas pāreju, nevis slaidu.
<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>
Individuālais .carousel-item
intervāls
Pievienot data-bs-interval=""
a .carousel-item
, lai mainītu laiku, kas jāpavada starp automātisku pārslēgšanos uz nākamo vienumu.
<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>
Atspējot skāriena vilkšanu
Karuseļi atbalsta skārienekrāna ierīču vilkšanu pa kreisi/pa labi, lai pārvietotos starp slaidiem. To var atspējot, izmantojot data-bs-touch
atribūtu. Tālāk esošajā piemērā arī nav iekļauts data-bs-ride
atribūts, data-bs-interval="false"
tāpēc tas netiek atskaņots automātiski.
<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>
Tumšs variants
Pievienojiet .carousel-dark
tam, lai .carousel
iegūtu tumšākas vadīklas, indikatorus un parakstus. Vadīklas ir apgrieztas no noklusējuma baltā aizpildījuma ar filter
CSS rekvizītu. Parakstiem un vadīklām ir papildu Sass mainīgie, kas pielāgo color
un 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>
Pielāgota pāreja
Pārejas ilgumu .carousel-item
var mainīt ar $carousel-transition-duration
Sass mainīgo pirms kompilēšanas vai pielāgotajiem stiliem, ja izmantojat kompilēto CSS. Ja tiek lietotas vairākas pārejas, pārliecinieties, vai vispirms ir definēta transformācijas pāreja (piemēram, transition: transform 2s ease, opacity .5s ease-out
).
Sass
Mainīgie lielumi
$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);
Lietošana
Izmantojot datu atribūtus
Izmantojiet datu atribūtus, lai viegli kontrolētu karuseļa pozīciju. data-bs-slide
pieņem atslēgvārdus prev
vai next
, kas maina slaida pozīciju attiecībā pret tā pašreizējo pozīciju. Varat arī izmantot, data-bs-slide-to
lai nodotu neapstrādātu slaidu indeksu karuselim data-bs-slide-to="2"
, kas maina slaida pozīciju uz noteiktu indeksu, kas sākas ar 0
.
Atribūts data-bs-ride="carousel"
tiek izmantots, lai atzīmētu karuseli kā animētu, sākot ar lapas ielādi. Ja neizmantojat data-bs-ride="carousel"
karuseļa inicializāciju, jums tas ir jāinicializē pašam. To nevar izmantot kopā ar (lieku un nevajadzīgu) nepārprotamu tā paša karuseļa JavaScript inicializēšanu.
Izmantojot JavaScript
Manuāli izsaukt karuseļu, izmantojot:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-
, tāpat kā data-bs-interval=""
.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
interval |
numuru | 5000 |
Laiks, kas jāpavada starp vienuma automātisku pārvietošanu. Ja false , karuselis nedarbosies automātiski. |
keyboard |
Būla | true |
Vai karuselim jāreaģē uz tastatūras notikumiem. |
pause |
stīga | Būla | 'hover' |
Ja iestatīts uz Ierīcēs ar iespējotām skārienjūtēm, kad tas ir iestatīts uz |
ride |
stīga | Būla | false |
Automātiski tiek atskaņots karuselis pēc tam, kad lietotājs manuāli pārvieto pirmo vienumu. Ja iestatīts uz 'carousel' , ielādes karuselis tiek atskaņots automātiski. |
wrap |
Būla | true |
Neatkarīgi no tā, vai karuselim ir jāpārvietojas nepārtraukti, vai tam ir jābūt stingriem apstāšanās gadījumiem. |
touch |
Būla | true |
Vai karuselim ir jāatbalsta skārienekrāna ierīču vilkšana pa kreisi/pa labi. |
Metodes
Asinhronās metodes un pārejas
Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .
Varat izveidot karuseļa gadījumu, izmantojot karuseļa konstruktoru, piemēram, lai inicializētu ar papildu opcijām un sāktu pārvietoties pa vienumiem:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metode | Apraksts |
---|---|
cycle |
Pārvietojas pa karuseļa vienumiem no kreisās puses uz labo. |
pause |
Neļauj karuselim pārvietoties pa priekšmetiem. |
prev |
Pāriet uz iepriekšējo vienumu. Atgriežas pie zvanītāja, pirms ir parādīts iepriekšējais vienums (piem., pirms slid.bs.carousel notikuma). |
next |
Pāriet uz nākamo vienumu. Atgriežas pie zvanītāja, pirms ir parādīts nākamais vienums (piemēram, pirms slid.bs.carousel notikuma). |
nextWhenVisible |
Nepārslēdziet karuseli uz nākamo, ja lapa nav redzama vai nav redzams karuselis vai tā vecākais. Atgriežas pie zvanītāja, pirms mērķa vienums ir parādīts |
to |
Pārvieto karuseli uz noteiktu kadru (0, kas ir līdzīgs masīvam). Atgriežas pie zvanītāja, pirms ir parādīts mērķa vienums (piemēram, pirms slid.bs.carousel notikuma). |
dispose |
Iznīcina elementa karuseli. (Noņem DOM elementā saglabātos datus) |
getInstance |
Statiskā metode, kas ļauj iegūt karuseļa gadījumu, kas saistīts ar DOM elementu, varat to izmantot šādi:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Statiskā metode, kas atgriež ar DOM elementu saistītu karuseļa gadījumu vai izveido jaunu, ja tas nav inicializēts. Varat to izmantot šādi:bootstrap.Carousel.getOrCreateInstance(element) |
Pasākumi
Bootstrap karuseļa klase atklāj divus notikumus, lai pievienotos karuseļa funkcionalitātei. Abiem notikumiem ir šādas papildu īpašības:
direction
: virziens, kurā karuselis slīd (vai nu"left"
)"right"
.relatedTarget
: DOM elements, kas tiek bīdīts vietā kā aktīvais vienums.from
: pašreizējā vienuma rādītājsto
: nākamā vienuma rādītājs
Visi karuseļa notikumi tiek aktivizēti pašā karuselī (ti, uz <div class="carousel">
).
Pasākuma veids | Apraksts |
---|---|
slide.bs.carousel |
Aktivizējas nekavējoties, kad slide tiek izsaukta instances metode. |
slid.bs.carousel |
Tiek aktivizēts, kad karuselis ir pabeidzis slaida pāreju. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})