Carousel
Yon eleman diaporama pou monte bisiklèt nan eleman-imaj oswa glisad nan tèks-tankou yon Carousel.
Ki jan li fonksyone
Carousel la se yon diaporama pou monte bisiklèt atravè yon seri kontni, bati ak CSS 3D transfòme ak yon ti jan nan JavaScript. Li travay ak yon seri de imaj, tèks, oswa maketing koutim. Li gen ladan tou sipò pou kontwòl anvan / pwochen ak endikatè.
Nan navigatè kote API Vizibilite Paj la sipòte, Carousel la ap evite glise lè paj wèb la pa vizib pou itilizatè a (tankou lè tab navigatè a inaktif, fenèt navigatè a minimize, elatriye).
prefers-reduced-motion
rechèch medya yo. Gade
seksyon mouvman redui nan dokiman aksè nou an .
Tanpri sonje ke karousèl anbrike yo pa sipòte, e karousèl yo jeneralman pa konfòme ak estanda aksè.
Anfen, si w ap bati JavaScript nou an soti nan sous, li mande pouutil.js
.
Egzanp
Carousels pa otomatikman nòmalize dimansyon glise yo. Kòm sa yo, ou ka bezwen sèvi ak sèvis piblik adisyonèl oswa estil koutim pou yon fason apwopriye gwosè kontni. Pandan ke karousèl sipòte kontwòl ak endikatè anvan/pwochen, yo pa klèman obligatwa. Ajoute ak personnaliser jan ou wè anfòm.
Yo .active
dwe ajoute klas la nan youn nan glisad yo sinon karousèl la p ap vizib. Epitou asire w ke ou mete yon inik id
sou la .carousel
pou kontwòl opsyonèl, espesyalman si w ap itilize karousèl miltip sou yon sèl paj. Eleman kontwòl ak endikatè yo dwe gen yon data-target
atribi (oswa href
pou lyen) ki matche ak id
eleman .carousel
an.
Slides sèlman
Isit la nan yon Carousel ak glisad sèlman. Remake prezans nan .d-block
ak .w-100
sou imaj Carousel pou anpeche aliyman imaj default navigatè a.
<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>
Avèk kontwòl
Ajoute nan kontwòl anvan ak pwochen. Nou rekòmande pou itilize <button>
eleman, men ou ka itilize <a>
eleman tou ak 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>
Avèk endikatè
Ou kapab tou ajoute endikatè yo nan Carousel la, ansanm ak kontwòl yo tou.
<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>
Avèk tit
Ajoute ti tit nan diapositives ou yo fasil ak .carousel-caption
eleman ki nan nenpòt ki .carousel-item
. Yo ka kache fasilman sou vi ki pi piti yo, jan yo montre anba a, ak sèvis piblik opsyonèl . Nou kache yo okòmansman ak .d-none
pote yo tounen sou aparèy gwosè mwayen ak .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>
Crossfade
Ajoute .carousel-fade
nan Carousel ou a pou anime glisad ak yon tranzisyon fennen olye de yon glisad. Tou depan de kontni Carousel ou a (egzanp, tèks sèlman glisad), ou ka vle ajoute .bg-body
oswa kèk CSS koutim nan .carousel-item
s yo pou bon jan kwaze.
<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
Entèval endividyèl
Ajoute data-interval=""
nan yon .carousel-item
pou chanje kantite tan pou pran reta ant otomatikman monte bisiklèt nan pwochen atik la.
<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>
Enfim glise manyen
Carousels sipòte glise agoch/dwat sou aparèy tactile pou deplase ant glisad. Sa a ka enfim lè l sèvi avèk data-touch
atribi a. Egzanp ki anba a tou pa gen ladan data-ride
atribi a epi li gen data-interval="false"
pou li pa jwe otomatikman.
<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>
Itilizasyon
Via atribi done yo
Sèvi ak atribi done yo fasil kontwole pozisyon nan Carousel la. data-slide
aksepte mo kle yo prev
oswa next
, ki chanje pozisyon glise an parapò ak pozisyon aktyèl li. Altènativman, sèvi ak data-slide-to
yo pase yon endèks glise anvan tout koreksyon nan Carousel la data-slide-to="2"
, ki chanjman pozisyon glise nan yon endèks patikilye kòmanse ak 0
.
Yo data-ride="carousel"
itilize atribi a pou make yon Carousel kòm animasyon apati chaj paj la. Si ou pa itilize data-ride="carousel"
pou inisyalize Carousel ou a, ou dwe inisyalize li tèt ou. Li pa ka itilize nan konbinezon ak (redondan ak nesesè) inisyalizasyon JavaScript eksplisit nan menm Carousel la.
Via JavaScript
Rele Carousel manyèlman ak:
$('.carousel').carousel()
Opsyon
Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-
, tankou nan data-interval=""
.
Non | Kalite | Default | Deskripsyon |
---|---|---|---|
entèval | nimewo | 5000 | Kantite tan pou pran reta ant otomatikman monte bisiklèt yon atik. Si false , Carousel pa pral otomatikman sik. |
klavye | booleyen | vre | Si Carousel la ta dwe reyaji nan evènman klavye yo. |
pran yon poz | fisèl | booleyen | 'plane' | Si mete sou Sou aparèy manyen yo, lè yo mete sou |
woulib | fisèl | fo | Autoplays Carousel la apre itilizatè a manyèlman sik premye atik la. Si mete sou 'carousel' , lire otomatikman Carousel la sou chaj. |
vlope | booleyen | vre | Kit Carousel la ta dwe sikile kontinyèlman oswa si wi ou non si w ta dwe fè yon kanpe difisil. |
manyen | booleyen | vre | Si Carousel la ta dwe sipòte entèraksyon glise gòch/dwat sou aparèy tactile. |
Metòd
Metòd asynchrone ak tranzisyon
Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .
.carousel(options)
Inisyalize Carousel la ak yon opsyon opsyonèl object
epi kòmanse monte bisiklèt nan atik yo.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Fè sik nan atik yo Carousel de goch a dwat.
.carousel('pause')
Sispann Carousel la soti nan monte bisiklèt nan atik yo.
.carousel(number)
Cycles Carousel la nan yon ankadreman patikilye (0 ki baze sou, menm jan ak yon etalaj). Retounen bay moun kap rele a anvan yo te montre atik sib la (sa vle di anvan slid.bs.carousel
evènman an rive).
.carousel('prev')
Cycles pou atik anvan an. Retounen bay moun k ap rele a anvan yo te montre atik anvan an (sa vle di anvan slid.bs.carousel
evènman an rive).
.carousel('next')
Cycles pou atik kap vini an. Retounen bay moun k ap rele a anvan yo montre pwochen atik la (sa vle di anvan slid.bs.carousel
evènman an rive).
.carousel('dispose')
Detwi Carousel yon eleman.
.carousel('nextWhenVisible')
Pa monte bisiklèt Carousel la nan pwochen lè paj la pa vizib oswa Carousel la oswa paran li pa vizib. Retounen bay moun k ap rele a anvan yo montre pwochen atik la (sa vle di anvan slid.bs.carousel
evènman an rive).
.carousel('to')
Cycles Carousel la nan yon ankadreman patikilye (0 ki baze sou, menm jan ak yon etalaj). Retounen bay moun k ap rele a anvan yo montre pwochen atik la (sa vle di anvan slid.bs.carousel
evènman an rive).
Evènman
Klas Carousel Bootstrap la ekspoze de evènman pou branche nan fonksyonalite Carousel. Tou de evènman yo gen pwopriyete adisyonèl sa yo:
direction
: Direksyon kote kawozèl la ap glise (swa"left"
oswa"right"
).relatedTarget
: Eleman DOM ke yo te glise an plas kòm atik aktif la.from
: Endèks atik aktyèl lato
: Endèks pwochen atik la
Tout evènman Carousel yo tire sou Carousel la li menm (sa vle di nan la <div class="carousel">
).
Kalite Evènman | Deskripsyon |
---|---|
slide.bs.carousel | Evènman sa a dife imedyatman lè yo slide envoke metòd egzanp lan. |
glise.bs.carousel | Evènman sa a revoke lè Carousel la fini tranzisyon glise li. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Chanje dire tranzisyon an
Dire tranzisyon an .carousel-item
ka chanje ak $carousel-transition
varyab Sass la anvan konpile oswa estil koutim si w ap itilize CSS konpile a. Si yo aplike plizyè tranzisyon, asire w ke tranzisyon transfòmasyon an defini an premye (eg. transition: transform 2s ease, opacity .5s ease-out
).