Carousel
He kiʻi kiʻiʻoniʻoni no ka holo kaʻa ʻana ma waena o nā mea—nā kiʻi a i ʻole nā kiʻi paheʻe o ke 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 waena o nā ʻike, i kūkulu ʻia me CSS 3D transforms a me kahi hapa o 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 ke ʻano ʻole o ka ʻaoʻao pūnaewele, hoʻemi ʻia ka puka aniani, a pēlā aku).
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 ʻoluʻolu ʻ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.
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-bs-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-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>
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-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>
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-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>
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-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
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.
<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>
Kūlana .carousel-item
kū hoʻokahi
Hoʻohui data-bs-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-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>
E hoʻopaʻa i ka paʻi ʻana
Kākoʻo nā Carousels i ka hili ʻana i ka ʻaoʻao hema a me ka ʻākau ma nā hāmeʻa pā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-bs-touch
. ʻAʻole hoʻokomo ʻia ka hiʻohiʻona i ka laʻana ma lalo data-bs-ride
a data-bs-interval="false"
no laila ʻaʻole ia e pāʻani auto.
<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>
ʻAno ʻeleʻele
Hoʻohui .carousel-dark
i ka .carousel
no nā mana ʻeleʻele, nā hōʻailona, a me nā captions. Ua hoʻohuli ʻia nā mana mai kā lākou hoʻopiha piha keʻokeʻo me ka filter
waiwai CSS. Loaʻa i nā captions a me nā mana nā hoʻololi Sass hou e hoʻopilikino i ka color
a me 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>
Hoʻololi maʻamau
Hiki ke hoʻololi ʻia ka lōʻihi o .carousel-item
ka hoʻololi ʻana me ka $carousel-transition-duration
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
).
Sass
Nā mea hoʻololi
$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);
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-bs-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-bs-slide-to
i ka hāʻawi ʻana i kahi papa kuhikuhi paheʻe maka i ka carousel data-bs-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-bs-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-bs-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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
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-bs-
, e like me ka data-bs-interval=""
.
inoa | ʻAno | Default | wehewehe |
---|---|---|---|
interval |
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 'akomi ka carousel. |
keyboard |
boolean | true |
Inā paha e pane ka carousel i nā hanana keyboard. |
pause |
kaula | boolean | 'hover' |
Inā hoʻonoho ʻia i Ma nā hāmeʻa hiki ke hoʻopā, ke hoʻonoho ʻia iā |
ride |
kaula | boolean | false |
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. |
wrap |
boolean | true |
Inā pono ke kaʻa kaʻa kaʻa kaʻa kaʻa a i ʻole ka paʻakikī. |
touch |
boolean | true |
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 .
Hiki iā ʻoe ke hana i kahi laʻana carousel me ka mea hana carousel, no ka laʻana, e hoʻomaka me nā koho hou aʻe a hoʻomaka i ka holo kaʻa i nā mea:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Kaʻina hana | wehewehe |
---|---|
cycle |
Kaʻapuni i nā mea carousel mai ka hema a i ka ʻākau. |
pause |
Hoʻopau i ka carousel mai ka holo paikikala ma nā mea. |
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 (e laʻa, ma mua o ka hiki ʻana o ka slid.bs.carousel hanana). |
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 (e laʻa, ma mua o ka hiki ʻana o ka slid.bs.carousel hanana). |
nextWhenVisible |
Mai kaʻa i ka carousel i ka wā ʻaʻole ʻike ʻia ka ʻaoʻao a ʻaʻole ʻike ʻia ka carousel a i ʻole kona makua. Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea i manaʻo ʻia |
to |
Hoʻololi i ka carousel i kahi kiʻi kikoʻī (ma muli o 0, e like me kahi array). Hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea i manaʻo ʻia (e laʻa, ma mua o ka hiki ʻana o ka slid.bs.carousel hanana). |
dispose |
Hoʻopau i ka carousel o kekahi mea. (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM) |
getInstance |
ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ke ʻano carousel e pili ana i kahi mea DOM, hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
ʻO ke ʻano static e hoʻihoʻi i kahi laʻana carousel pili i kahi mea DOM a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia. Hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Carousel.getOrCreateInstance(element) |
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 ma ka <div class="carousel">
).
ʻAno hanana | wehewehe |
---|---|
slide.bs.carousel |
Hoʻopau koke ʻia ke slide kāhea ʻia ke ʻano hana. |
slid.bs.carousel |
Hoʻopau ʻia ka carousel i kāna hoʻololi paheʻe. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})