Carousel
He waahanga whakaatakiriata mo te eke paihikara i roto i nga huānga—whakaahua, kiriata ranei o te tuhinga—penei i te carousel.
Pehea te mahi
Ko te carousel he whakaatakiriata mo te eke paihikara i roto i te raupapa o nga ihirangi, i hangaia me nga huringa CSS 3D me tetahi waahanga JavaScript. Ka mahi me te raupapa whakaahua, tuhinga, tohu tohu ritenga ranei. Kei roto hoki te tautoko mo nga mana whakahaere me nga tohu o mua/muri.
I roto i nga kaitirotiro kei te tautokohia te API Tirohanga Whārangi , ka kore te carousel e paheke ina kore te wharangi paetukutuku e kitea e te kaiwhakamahi (penei i te wa e hohekore ana te ripa tirotiro, ka whakaitihia te matapihi tirotiro, me etahi atu).
prefers-reduced-motion
uiui pāpāho. Tirohia te
waahanga motini whakaheke o a maatau tuhinga whakaurunga .
Kia mohio koe kaore i te tautokohia nga carousels kohanga, karekau hoki nga carousels e tau ana ki nga paerewa urunga.
Tauira
Ko nga carousels e kore e whakarite aunoa i nga rahi kiriata. Na tenei, ka hiahia pea koe ki te whakamahi i etahi atu taputapu, momo ritenga ranei kia tika te rahi o nga ihirangi. Ahakoa e tautoko ana nga carousels i nga mana me nga tohu o mua/panuku, kaore e tino hiahiatia ana. Tāpirihia me te whakarite kia rite ki taau e pai ai.
Me .active
taapiri te karaehe ki tetahi o nga kiriata kei kore e kitea te carousel. Me whakarite hoki ki te whakatakoto i tetahi mea motuhake id
mo nga .carousel
mana whiriwhiri, ina koa kei te whakamahi koe i nga carousels maha i runga i te wharangi kotahi. Ko nga huānga mana me te tohu me whai data-bs-target
huanga ( href
mo nga hononga ranei) e rite ana ki te id
o te .carousel
huānga.
Kiriata anake
Anei he carousel me nga kiriata anake. Kia mahara ki te noho o nga whakaahua carousel .d-block
me .w-100
runga ki te aukati i te tirohanga atahanga taunoa.
<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 nga mana whakahaere
Te taapiri i nga mana o mua me muri. Ka tūtohu matou ki te whakamahi i <button>
nga huānga, engari ka taea hoki e koe te whakamahi i <a>
nga huānga me te 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 nga tohu
Ka taea hoki te taapiri i nga tohu ki te carousel, ki te taha o nga mana whakahaere.
<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 nga tapanga
Tāpiri tapanga ki o kiriata me te .carousel-caption
huānga i roto i tetahi .carousel-item
. Ka taea te huna i runga i nga tauranga tiro iti ake, penei i raro nei, me nga taputapu whakaatu . Ka huna e matou i te tuatahi me .d-none
te whakahoki mai i runga i nga taputapu reo-rahi me te .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>
Whakawhitiwhiti
Taapirihia .carousel-fade
ki to carousel hei whakakorikori i nga kiriata me te whakawhiti memenge hei utu mo te kiriata.
<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
Wā takitahi
Tāpirihia data-bs-interval=""
ki a .carousel-item
hei huri i te nui o te wā ki te whakaroa i waenga i te paihikara aunoa ki te mea e whai ake nei.
<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>
Monokia te pa swiping
Ka tautokohia e nga Carousels te swipe maui/matau i runga i nga taputapu mata pa ki te neke i waenga i nga kiriata. Ka taea te whakakore i tenei ma te whakamahi i te data-bs-touch
huanga. Ko te tauira i raro nei kaore ano i te whakauru i te data-bs-ride
huanga, data-bs-interval="false"
na reira kaore e purei aunoa.
<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>
Te rereke pouri
Taapirihia .carousel-dark
ki te .carousel
mo nga mana pouri, nga tohu, me nga tapanga. Kua huria nga mana mai i te whakakī ma te taunoa ki te filter
taonga CSS. Ko nga tapanga me nga mana he taapiri Sass e whakarite ana i te color
me te 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>
Whakawhiti ritenga
.carousel-item
Ka taea te huri i te roanga whakawhiti o te $carousel-transition-duration
taurangi Sass i mua i te whakahiato, i nga momo ritenga ranei mena kei te whakamahi koe i te CSS kua whakahiato. Mena ka tukuna nga whakawhitinga maha, me mohio kua tautuhia te whakawhitinga huringa i te tuatahi (hei tauira transition: transform 2s ease, opacity .5s ease-out
).
Sass
Taurangi
$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);
Whakamahinga
Ma nga huanga raraunga
Whakamahia nga huanga raraunga kia ngawari te whakahaere i te tuunga o te carousel. data-bs-slide
ka whakaae ki nga kupumatua prev
, next
, e whakarereke ana i te tuunga kiriata e pa ana ki tona turanga o naianei. Arā, whakamahia data-bs-slide-to
ki te tuku i te taupū kiriata mata ki te carousel data-bs-slide-to="2"
, ka huri i te tūnga kiriata ki tetahi taupū ka timata ki te 0
.
Ka data-bs-ride="carousel"
whakamahia te huanga ki te tohu i te carousel hei whakaohooho timata mai i te utaina o te wharangi. Ki te kore koe e whakamahi data-bs-ride="carousel"
ki te arawhiti i to carousel, me arawhiti koe i a koe. Kaore e taea te whakamahi me te (he nui me te kore e tika) te arawhiti JavaScript o taua carousel.
Ma te JavaScript
Waea a ringatia te carousel me:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-bs-
, penei i te data-bs-interval=""
.
Ingoa | Momo | Taunoa | Whakaahuatanga |
---|---|---|---|
interval |
tau | 5000 |
Te nui o te wa ki te whakaroa i waenga i te paihikara aunoa i tetahi mea. Mena false , ka kore e huri aunoa te carousel. |
keyboard |
boolean | true |
Mena ka tauhohe te carousel ki nga takahanga papapātuhi. |
pause |
aho | boolean | 'hover' |
Ki te tautuhia ki te I runga i nga taputapu pa-whakahohea, ina tautuhia ki te |
ride |
aho | boolean | false |
Ka purei aunoa i te carousel i muri i te huringa a te kaiwhakamahi i te mea tuatahi. Ki te tautuhi ki te 'carousel' , ka purei aunoa i te carousel i runga i te uta. |
wrap |
boolean | true |
Mena ka huri haere tonu te carousel, me kaha ranei te aukati. |
touch |
boolean | true |
Mena ka tautokohia e te carousel nga taunekeneke swipe maui/matau i runga i nga taputapu mata pa. |
Nga tikanga
Nga tikanga tukutahi me nga whakawhitinga
Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .
Ka taea e koe te hanga tauira carousel me te kaihanga carousel, hei tauira, ki te arawhiti me etahi atu whiringa ka timata ki te eke paihikara i roto i nga taonga:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Tikanga | Whakaahuatanga |
---|---|
cycle |
Ka huri i nga taonga carousel mai i te maui ki te matau. |
pause |
Ka aukati te carousel i te eke paihikara ma nga taonga. |
prev |
Ka huri ki te mea o mua. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea o mua (hei tauira, i mua i te slid.bs.carousel puta o te takahanga). |
next |
Ka huri ki te tuemi e whai ake nei. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea e whai ake nei (hei tauira, i mua i te slid.bs.carousel puta o te takahanga). |
nextWhenVisible |
Kaua e huri i te carousel ki muri ka kore e kitea te wharangi, kaore ranei te carousel, tona matua ranei e kitea. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea i whäia |
to |
Ka huri i te carousel ki tetahi anga (0 te ahua, he rite ki te huranga). Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea i whaaia (hei tauira, i mua i te slid.bs.carousel puta o te takahanga). |
dispose |
Ka whakangaro i te carousel o tetahi huānga. (Tangohia ai nga raraunga rongoa i te huānga DOM) |
getInstance |
Tikanga pateko e taea ai e koe te tiki i te tauira carousel e hono ana ki tetahi huānga DOM, ka taea e koe te whakamahi penei:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Aratuka pateko hei whakahoki mai i tetahi tauira carousel e hono ana ki tetahi huānga DOM, ka hanga ranei i tetahi mea hou mena kaore i arawhitia. Ka taea e koe te whakamahi penei:bootstrap.Carousel.getOrCreateInstance(element) |
Nga huihuinga
Ko te karaehe carousel a Bootstrap e whakaatu ana i nga huihuinga e rua mo te hono ki te mahi carousel. Ko nga huihuinga e rua nga waahanga taapiri e whai ake nei:
direction
: Ko te ahunga e retireti ana te carousel (ranei"left"
,"right"
).relatedTarget
: Ko te huānga DOM kei te reheke ki te waahi hei taonga hohe.from
: Te taupū o te tūemi o nāianeito
: Te taupū o te tūemi e whai ake nei
Ko nga huihuinga carousel katoa ka pupuhihia ki te carousel ake (arā, ki te <div class="carousel">
).
Momo takahanga | Whakaahuatanga |
---|---|
slide.bs.carousel |
Ka puhipuhi tonu ina tono te slide aratuka tauira. |
slid.bs.carousel |
Ka puhia i te wa i oti ai te whakawhiti kiriata. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})