Carousel
He kiʻi kiʻi kiʻi no ka holo kaʻa ʻana ma waena o nā mea—nā kiʻi a i ʻole nā paheʻe kikokikona—e like me ka carousel.
Pehea e hana ai
ʻO ka carousel kahi kiʻi kiʻiʻoniʻoni no ka holo kaʻa ʻana ma o ke ʻano o ka ʻike, i kūkulu ʻia me CSS 3D transforms a me kahi mea JavaScript. Hoʻohana ia me nā kiʻi, kikokikona, a i ʻole markup maʻamau. Loaʻa pū kekahi i ke kākoʻo no nā mana mua / aʻe a me nā hōʻailona.
Ma nā polokalamu kele pūnaewele kahi i kākoʻo ʻia ai ka API Visibility ʻAoʻao , e pale ka carousel i ka paheʻe ʻana ke ʻike ʻole ʻia ka ʻaoʻao pūnaewele e ka mea hoʻohana (e like me ka wā ʻaʻole hoʻohana ʻia ka ʻaoʻao polokalamu kele pūnaewele, hoʻemi ʻia ka puka aniani, etc.).
prefers-reduced-motion
nīnau media. E ʻike
i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .
E ʻoluʻolu e hoʻomaopopo ʻaʻole kākoʻo ʻia nā carousels pūnana, a ʻaʻole kūlike nā carousels i nā kūlana hiki ke loaʻa.
ʻO ka hope, inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js
ia .
Laʻana
ʻAʻole hana maʻamau nā Carousels i nā ana paheʻe. No laila, pono paha ʻoe e hoʻohana i nā pono hana hou a i ʻole nā ʻano maʻamau i ka nui o ka ʻike. ʻOiai ke kākoʻo nei nā carousels i nā mana a me nā hōʻailona o mua/hope aku, ʻaʻole koi ʻia lākou. Hoʻohui a hoʻopilikino e like me kou manaʻo pono.
Pono .active
e hoʻohui ʻia ka papa i kekahi o nā paheʻe i ʻole e ʻike ʻia ka carousel. E ʻoluʻolu hoʻi e hoʻonoho i kahi ʻokoʻa id
no .carousel
nā mana koho, ʻoi aku paha inā ʻoe e hoʻohana ana i nā carousels he nui ma ka ʻaoʻao hoʻokahi. Pono nā mea hoʻomalu a me nā mea hōʻike e loaʻa i kahi data-target
ʻano (a i ʻole href
no nā loulou) i kūpono i ka mea id
o ka .carousel
mea.
Paheʻe wale
Eia kahi carousel me nā paheʻe wale nō. E hoʻomaopopo i ka loaʻa ʻana o nā kiʻi carousel .d-block
a .w-100
ma luna o nā kiʻi carousel e pale ai i ka hoʻolikelike kiʻi paʻamau.
<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>
Me nā mana
Hoʻohui i nā mana mua a me ka hope. Manaʻo mākou e hoʻohana i <button>
nā mea, akā hiki iā ʻoe ke hoʻohana pū i <a>
nā mea me 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>
Me nā hōʻailona
Hiki iā ʻoe ke hoʻohui i nā hōʻailona i ka carousel, me ka ʻaoʻao o nā mana.
<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>
Me nā huaʻōlelo
Hoʻohui maʻalahi i nā huaʻōlelo i kāu mau paheʻe me ka .carousel-caption
mea i loko o kekahi .carousel-item
. Hiki iā lākou ke hūnā maʻalahi ma nā wahi nānā liʻiliʻi, e like me ka mea i hōʻike ʻia ma lalo nei, me nā pono hōʻike koho . Huna mua mākou iā lākou .d-none
me ka hoʻihoʻi ʻana iā lākou ma nā hāmeʻa liʻiliʻi me .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
Hoʻohui .carousel-fade
i kāu carousel e hoʻolalelale i nā kiʻi paheʻe me kahi hoʻololi mae ma mua o kahi paheʻe. Ma muli o kāu ʻike carousel (e laʻa, nā paheʻe kikokikona wale nō), makemake paha ʻoe e hoʻohui a i .bg-body
ʻole kekahi CSS maʻamau i nā .carousel-item
s no ka hoʻololi ʻana kūpono.
<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>
Kūlana .carousel-item
kū hoʻokahi
Hoʻohui data-interval=""
i kahi .carousel-item
e hoʻololi i ka nui o ka manawa e hoʻopaneʻe ai ma waena o ka holo kaʻa ʻakomi i ka mea aʻe.
<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>
E hoʻopaʻa i ka paʻi ʻana
Kākoʻo nā Carousels i ka hili ʻana i ka hema/'ākau ma nā ʻaoʻao paʻi lima e neʻe ai ma waena o nā paheʻe. Hiki ke hoʻopau ʻia kēia me ka hoʻohana ʻana i ke ʻano data-touch
. ʻAʻole hoʻokomo ʻia ka hiʻohiʻona i ka laʻana ma lalo data-ride
a data-interval="false"
no laila ʻaʻole ia e pāʻani auto.
<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>
Hoʻohana
Ma o nā hiʻohiʻona ʻikepili
E hoʻohana i nā hiʻohiʻona ʻikepili e hoʻomalu maʻalahi i ke kūlana o ka carousel. data-slide
ʻae i nā huaʻōlelo a i prev
ʻole next
, e hoʻololi i ke kūlana paheʻe e pili ana i kona kūlana i kēia manawa. ʻO kahi ʻē aʻe, e hoʻohana data-slide-to
i ka hāʻawi ʻana i kahi papa kuhikuhi paheʻe maka i ka carousel data-slide-to="2"
, e hoʻololi i ke kūlana paheʻe i kahi kuhikuhi kikoʻī e hoʻomaka ana me 0
.
Hoʻohana data-ride="carousel"
ʻia ka ʻano e hōʻailona ai i kahi carousel ma ke ʻano he animating e hoʻomaka ana ma ka hoʻouka ʻana i ka ʻaoʻao. Inā ʻaʻole ʻoe e hoʻohana data-ride="carousel"
e hoʻomaka i kāu carousel, pono ʻoe e hoʻomaka iā ʻoe iho. ʻAʻole hiki ke hoʻohana pū ʻia me (nui a pono ʻole) ka hoʻomaka mua ʻana o JavaScript o ka carousel like.
Ma o JavaScript
Kāhea lima ʻia ka carousel me:
$('.carousel').carousel()
Nā koho
Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-
, e like me ka data-interval=""
.
inoa | ʻAno | Default | wehewehe |
---|---|---|---|
waena | helu | 5000 | ʻO ka nui o ka manawa e hoʻopaneʻe ai ma waena o ke kaʻa ʻakomi i kahi mea. Inā false , ʻaʻole e holo ʻokoʻa ka carousel. |
keyboard | boolean | ʻoiaʻiʻo | Inā paha e pane ka carousel i nā hanana keyboard. |
hoʻomaha | kaula | boolean | 'hover' | Inā hoʻonoho ʻia i Ma nā hāmeʻa hiki ke hoʻopā, ke hoʻonoho ʻia iā |
holo | kaulahao | wahahee | Hoʻokani ʻauʻa i ka carousel ma hope o ka holo lima ʻana o ka mea hoʻohana i ka mea mua. Inā hoʻonoho ʻia iā 'carousel' , hoʻokani auto i ka carousel ma ka hoʻouka ʻana. |
kāʻei | boolean | ʻoiaʻiʻo | Inā pono ke kaʻa kaʻa kaʻa kaʻa kaʻa a i ʻole ka paʻakikī. |
hoʻopā | boolean | ʻoiaʻiʻo | Inā paha e kākoʻo ka carousel i ka hoʻopili ʻana i ka swipe hema a ʻākau ma nā hāmeʻa touchscreen. |
Nā ʻano hana
Nā ʻano asynchronous a me nā hoʻololi
Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .
.carousel(options)
Hoʻomaka ka carousel me nā koho koho object
a hoʻomaka i ka holo kaʻa i nā mea.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Kaʻapuni i nā mea carousel mai ka hema a i ka ʻākau.
.carousel('pause')
Hoʻopau i ka carousel mai ka holo paikikala ma nā mea.
.carousel(number)
Hoʻololi i ka carousel i kahi kiʻi kikoʻī (ma muli o 0, e like me kahi array). E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea i manaʻo ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka slid.bs.carousel
hanana).
.carousel('prev')
Hoʻoholo i ka mea mua. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea mua (ʻo ia hoʻi ma mua o ka hiki ʻana o ka slid.bs.carousel
hanana).
.carousel('next')
Hoʻoholo i ka mea aʻe. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea aʻe (ʻo ia hoʻi ma mua o ka hiki ʻana o ka slid.bs.carousel
hanana).
.carousel('dispose')
Hoʻopau i ka carousel o kekahi mea.
.carousel('nextWhenVisible')
Mai kaapuni i ka carousel i ka wā ʻaʻole ʻike ʻia ka ʻaoʻao a i ʻole ʻike ʻia ka carousel a i ʻole kona makua. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea aʻe (ʻo ia hoʻi ma mua o ka hiki ʻana o ka slid.bs.carousel
hanana).
.carousel('to')
Hoʻololi i ka carousel i kahi kiʻi kikoʻī (ma muli o 0, e like me kahi array). E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea aʻe (ʻo ia hoʻi ma mua o ka hiki ʻana o ka slid.bs.carousel
hanana).
Nā hanana
Hōʻike ka papa carousel o Bootstrap i ʻelua hanana no ka hoʻopili ʻana i ka hana carousel. Loaʻa i nā hanana ʻelua nā waiwai hou aʻe:
direction
: ʻO ka ʻaoʻao e heʻe ana ka carousel (a i"left"
ʻole"right"
).relatedTarget
: ʻO ka mea DOM e hoʻoneʻe ʻia ana ma ke ʻano he mea hana.from
: Ka papa kuhikuhi o ka mea o keia manawato
: Ka papa kuhikuhi o ka mea aʻe
Hoʻopau ʻia nā hanana carousel a pau i ka carousel ponoʻī (ʻo ia hoʻi ma ka <div class="carousel">
).
ʻAno Hanana | wehewehe |
---|---|
slide.bs.carousel | Hoʻopau koke ʻia kēia hanana i ka wā slide e kāhea ʻia ke ʻano hana. |
slid.bs.carousel | Hoʻopau ʻia kēia hanana ke hoʻopau ka carousel i kāna hoʻololi paheʻe. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Hoʻololi i ka lōʻihi o ka hoʻololi
Hiki ke hoʻololi ʻia ka lōʻihi o .carousel-item
ka hoʻololi ʻana me ka $carousel-transition
hoʻololi Sass ma mua o ka hōʻuluʻulu ʻana a i ʻole ke ʻano maʻamau inā ʻoe e hoʻohana ana i ka CSS i hōʻuluʻulu ʻia. Inā hoʻohana ʻia nā hoʻololi he nui, e hōʻoia i ka wehewehe mua ʻana o ka hoʻololi hoʻololi (e laʻa. transition: transform 2s ease, opacity .5s ease-out
).