Carousel
O se vaega fa'ata'ita'i mo le uila i elemene—ata po'o fa'ase'e o tusitusiga—pei o se carousel.
E faapefea ona galue
O le carousel o se faʻataʻitaʻiga mo le tietie uila i se faasologa o anotusi, fausia i le CSS 3D transforms ma sina JavaScript. E galue i se faasologa o ata, tusitusiga, poʻo faʻailoga masani. E aofia ai foʻi le lagolago mo faʻatonuga muamua / sosoʻo ma faʻailoga.
I su'esu'ega o lo'o lagolagoina ai le Itulau Visibility API , o le carousel o le a 'alofia le fa'ase'e pe a le va'aia e le tagata fa'aoga le itulau i luga ole laiga (pei o le taimi e le gaioi ai le itulau su'esu'e, fa'aitiitia le fa'amalama o le su'esu'ega, ma isi).
prefers-reduced-motion
aufaasālalau. Va'ai le vaega
fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .
Fa'amolemole ia nofouta e le o lagolagoina fo'i ta'avale fa'amoe, ma e masani fo'i ona le ogatasi ma ta'iala fa'aoga.
Faataitaiga
E le otometi ona fa'avasega e ta'avale fa'ase'e fua. E pei o lea, atonu e te manaʻomia le faʻaogaina o mea faʻaoga faaopoopo poʻo sitaili masani e faʻatatau i le tele o mea. A'o lagolagoina e carousels pulega ma fa'ailoga muamua/so'o mai, e le'o mana'omia manino. Fa'aopoopo ma fa'avasega pe a e mana'o e fetaui.
E .active
mana'omia le fa'aopoopoina o le vasega i se tasi o fa'ata'ita'i a leai o le a le mafai ona iloa le ta'avale. Ia mautinoa foi e seti se tulaga tulaga ese id
i luga o le .carousel
mo le pule faitalia, aemaise lava pe afai o loʻo e faʻaaogaina le tele o carousels i luga o le itulau e tasi. O elemene fa'atonutonu ma fa'ailoga e tatau ona iai se data-bs-target
uiga (po'o href
so'oga) e fetaui ma id
le .carousel
elemene.
Na'o fa'ase'e
O le carousel lea e na'o fa'ase'e. Fa'amautu le iai o ata .d-block
ma .w-100
luga o le carousel e taofia ai le fa'aogaina o ata o le browser.
<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>
Faatasi ai ma pulega
Faʻaopoopo i le pule muamua ma le isi. Matou te fautuaina le faʻaaogaina <button>
o elemene, ae e mafai foi ona e faʻaogaina <a>
elemene ma 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>
Faatasi ai ma faailoga
E mafai fo'i ona e fa'aopoopo fa'ailoga i le carousel, fa'atasi ma fa'atonuga.
<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>
Fa'atasi ai ma fa'amatalaga
Fa'aopoopo fa'amatalaga i au fa'ase'e faigofie ma le .carousel-caption
elemene i totonu o so'o se .carousel-item
. E mafai ona faigofie ona natia i luga o vaʻaiga vaʻaia laiti, e pei ona faʻaalia i lalo, faʻatasi ai ma mea faʻaoga faʻaalia . Matou te nanaina muamua .d-none
ma toe aumai i luga o masini lapopoa ma .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>
Fa'ase'e
Fa'aopoopo .carousel-fade
i lau carousel e fa'aola ata fa'ase'e fa'atasi ai ma se suiga fa'ase'e nai lo se fa'ase'e.
<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>
.carousel-item
Vaeluaga ta'ito'atasi
Fa'aopoopo data-bs-interval=""
i le a .carousel-item
e sui ai le aofa'i o le taimi e fa'atuai ai i le va o le uila fa'afuase'i i le isi mea.
<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>
Taofi le pa'i solo
E lagolagoina e Carousels le swipe agavale/taumatau i masini mata pa'i e fealua'i i le va o ata fa'ase'e. E mafai ona fa'agata le fa'aogaina o le data-bs-touch
uiga. O le fa'ata'ita'iga o lo'o i lalo e le'o aofia ai fo'i le data-bs-ride
uiga ma o data-bs-interval="false"
lea e le ta'alo ai.
<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>
Suiga pogisa
Fa'aopoopo .carousel-dark
i le .carousel
mo fa'atonuga pogisa, fa'ailoga, ma fa'amatalaga. Ua fesuia'i fa'atonuga mai lo latou fa'atumu pa'epa'e fa'atosina ile filter
meatotino CSS. O fa'aupuga ma fa'atonuga e iai fa'aopoopoga fa'aopoopo Sass e fa'avasega ai le color
ma 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>
Suiga masani
Ole umi ole suiga ole .carousel-item
mafai ona suia ile $carousel-transition-duration
fesuiaiga Sass a'o le'i tu'ufa'atasia po'o sitaili masani pe afai o lo'o e fa'aogaina le CSS tu'ufa'atasi. Afai e tele suiga e fa'aaogaina, ia mautinoa o le suiga o le suiga e fa'amalamalama muamua (fa'ata'ita'iga transition: transform 2s ease, opacity .5s ease-out
).
Sass
Fuafuaga
$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);
Fa'aoga
E ala i fa'amaumauga uiga
Fa'aoga uiga fa'amaumauga e faigofie ai ona pulea le tulaga o le carousel. data-bs-slide
talia upu autu prev
po'o next
, lea e suia ai le tulaga fa'ase'e fa'atatau i lona tulaga o iai nei. I le isi itu, fa'aaoga data-bs-slide-to
e pasi ai se fa'ailoga fa'ase'e mata'utia i le carousel data-bs-slide-to="2"
, lea e sui ai le tulaga fa'ase'e i se fa'ailoga fa'apitoa e amata i le 0
.
O le data-bs-ride="carousel"
uiga e fa'aoga e fa'ailoga ai se carousel e fa'aola e amata ile utaina o itulau. Afai e te le fa'aaogaina data-bs-ride="carousel"
e amata ai lau carousel, e tatau ona e amataina e oe lava ia. E le mafai ona fa'aogaina fa'atasi ma (e le toe mana'omia) fa'amatalaga manino JavaScript amata o le carousel tutusa.
E ala i le JavaScript
Valaau ma le lima le carousel ma:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Filifiliga
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-bs-
, pei o le data-bs-interval=""
.
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
interval |
numera | 5000 |
Le aofa'i o le taimi e fa'atuai ai i le va o le ta'avale otometi se mea. Afai false , e le otometi le taamilomilo o le carousel. |
keyboard |
boolean | true |
Pe tatau ona tali atu le carousel i mea e tutupu i le keyboard. |
pause |
manoa | boolean | 'hover' |
Afai e seti i le I luga o masini e mafai ona pa'i, pe a seti i le |
ride |
manoa | boolean | false |
Ta'alo otometi le carousel pe a uma ona fa'ata'amilo lima le tagata fa'aoga le mea muamua. Afai e seti i le 'carousel' , otometi ona ta le carousel i luga o le uta. |
wrap |
boolean | true |
Pe tatau ona fa'aauau le ta'amilosaga o le ta'amilosaga pe fa'agata fo'i. |
touch |
boolean | true |
Pe e tatau ona lagolagoina e le carousel fegalegaleaiga swipe agavale/taumatau i masini e pa'i. |
Metotia
Metotia ma suiga e le tutusa
O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amana'ia se auala e vala'au ai i se vaega o suiga .
E mafai ona e faia se fa'ata'ita'iga o le carousel ma le faufale o le carousel, mo se fa'ata'ita'iga, e fa'amata i filifiliga fa'aopoopo ma amata ai le uila i mea:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metotia | Fa'amatalaga |
---|---|
cycle |
Ta'amilomilo i aitema carousel mai le agavale i le taumatau. |
pause |
Taofi le carousel mai le tietie uila i aitema. |
prev |
Ta'amilosaga i le mea muamua. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le mea muamua (fa'ata'ita'iga, a'o le'i tupu le slid.bs.carousel mea na tupu). |
next |
Taamilo i le isi mea. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le isi mea (fa'ata'ita'iga, a'o le'i tupu le slid.bs.carousel mea na tupu). |
nextWhenVisible |
Aua le fa'ata'amilomilo le ta'avale i le isi pe a le iloa le itulau po'o le ta'avale po'o lona matua. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le mea fa'atatau |
to |
Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, tutusa ma se fa'asologa). Toe fo'i i le tagata vala'au a'o le'i fa'aalia le mea fa'atatau (fa'ata'ita'iga, a'o le'i tupu le slid.bs.carousel mea na tupu). |
dispose |
Fa'aleagaina le carousel o se elemene. (Ave'ese fa'amaumauga o lo'o teuina ile elemene DOM) |
getInstance |
Metotia static lea e mafai ai ona e maua le faʻataʻitaʻiga carousel e fesoʻotaʻi ma se elemene DOM, e mafai ona e faʻaogaina e pei o lenei:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Metotia static e toe faʻafoʻi ai se faʻataʻitaʻiga carousel e fesoʻotaʻi ma se elemene DOM pe fatuina se mea fou pe a leʻi amataina. E mafai ona e faʻaaogaina e pei o lenei:bootstrap.Carousel.getOrCreateInstance(element) |
Mea na tutupu
O le vasega carousel a Bootstrap o lo'o fa'aalia ai mea e lua mo le fa'aogaina o galuega fa'aoga. O mea tutupu uma e lua e iai mea fa'aopoopo nei:
direction
: Le itu o lo'o fa'ase'e ai le carousel ("left"
po'o le"right"
).relatedTarget
: O le elemene DOM o loʻo faʻasolo i totonu o le mea o loʻo galue.from
: Le faasino igoa o le mea o iai neito
: Le faasino igoa o le mea e sosoo ai
O mea uma e tutupu i le carousel e fa'amu i le carousel lava ia (ie i le <div class="carousel">
).
Ituaiga mea na tupu | Fa'amatalaga |
---|---|
slide.bs.carousel |
E mu vave pe a fa'aogaina le slide auala fa'ata'ita'i. |
slid.bs.carousel |
Fa'amu pe a mae'a le suiga fa'ase'e o le carousel. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})