Carousel
O se vaega fa'ata'ita'i mo le ta'amilosaga 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 uila e ala 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 faga, ma e masani fo'i ona le ogatasi ma ta'iala fa'aoga.
I le mea mulimuli, afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js
.
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-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'ailoa 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-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-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>
Faatasi ai ma faailoga
E mafai fo'i ona e fa'aopoopo fa'ailoga ile carousel, fa'atasi ma fa'atonuga.
<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>
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 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-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>
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. Fa'alagolago ile anotusi o lau carousel (fa'ata'ita'iga, tusitusiga na'o fa'ase'e), atonu e te mana'o e fa'aopoopo .bg-body
po'o se CSS fa'aganu'u i le .carousel-item
s mo le fa'asa'o lelei.
<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>
.carousel-item
Vaeluaga ta'ito'atasi
Fa'aopoopo data-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-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>
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 fa'asolo. E mafai ona fa'agata le fa'aogaina o le data-touch
uiga. O le fa'ata'ita'iga o lo'o i lalo e le'o aofia ai fo'i le data-ride
uiga ma o data-interval="false"
lea e le ta'alo ai.
<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>
Fa'aoga
E ala i fa'amaumauga uiga
Fa'aoga uiga fa'amaumauga e faigofie ai ona pulea le tulaga o le carousel. data-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-slide-to
e pasi ai se fa'ailoga fa'ase'e mata'utia i le carousel data-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-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-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:
$('.carousel').carousel()
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-
, pei o le data-interval=""
.
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
vaeluaga | 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. |
piano | boolean | moni | Pe tatau ona tali atu le carousel i mea e tutupu i le keyboard. |
taofi | manoa | boolean | 'ave'ave' | Afai e seti i le I luga o masini e mafai ona pa'i, pe a seti i le |
tietie | manoa | pepelo | 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. |
afifi | boolean | moni | Pe tatau ona fa'aauau le ta'amilosaga o le ta'amilosaga pe fa'agata fo'i. |
pa'i | boolean | moni | Pe o le carousel e tatau ona lagolagoina le agavale/sa'o feso'ota'iga swipe i masini lau 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ʻiaina se auala e valaʻau ai i se vaega o suiga .
.carousel(options)
Fa'amataina le carousel i se filifiliga e filifili object
ma amata ai le uila i mea.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Taamilomilo i aitema carousel mai le agavale i le taumatau.
.carousel('pause')
Taofi le carousel mai le tietie uila i aitema.
.carousel(number)
Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, pei o se fa'asologa). Toe fo'i i le tagata vala'au a'o le'i fa'aalia le mea fa'atatau (fa'atusa a'o le'i tupu le slid.bs.carousel
mea na tupu).
.carousel('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'atusa a'o le'i tupu le slid.bs.carousel
mea na tupu).
.carousel('next')
Taamilo i le isi mea. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le isi aitema (fa'atusa a'o le'i tupu le slid.bs.carousel
mea na tupu).
.carousel('dispose')
Fa'aleagaina le carousel o se elemene.
.carousel('nextWhenVisible')
Aua le viliina le carousel i le isi pe a le iloa le itulau pe le iloa foi le carousel po o lona matua. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le isi aitema (fa'atusa a'o le'i tupu le slid.bs.carousel
mea na tupu).
.carousel('to')
Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, pei o se fa'asologa). Toe fo'i i le tagata vala'au a'o le'i fa'aalia le isi aitema (fa'atusa a'o le'i tupu le slid.bs.carousel
mea na tupu).
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 | Fa'amatalaga |
---|---|
slide.bs.carousel | E mu vave lenei mea pe a fa'aogaina le slide auala fa'ata'ita'i. |
slid.bs.carousel | E fa'amu lenei mea pe a mae'a le fa'ase'esega fa'ase'e o le carousel. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Suia le umi o suiga
Ole umi ole suiga ole .carousel-item
mafai ona suia ile $carousel-transition
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
).