Jukwaa
Kipengele cha onyesho la slaidi cha kuendesha baiskeli kupitia vipengele—picha au slaidi za maandishi—kama jukwa.
Inavyofanya kazi
Jukwaa ni onyesho la slaidi la kuendesha baisikeli kupitia msururu wa maudhui, iliyojengwa kwa mabadiliko ya CSS 3D na JavaScript kidogo. Inafanya kazi na mfululizo wa picha, maandishi, au lebo maalum. Pia inajumuisha usaidizi kwa vidhibiti na viashirio vya awali/vifuatavyo.
Katika vivinjari ambapo API ya Mwonekano wa Ukurasa inatumika, jukwa litaepuka kuteleza wakati ukurasa wa wavuti hauonekani kwa mtumiaji (kama vile kichupo cha kivinjari kinapoacha kutumika, dirisha la kivinjari limepunguzwa, n.k.).
prefers-reduced-motion
hoja ya midia. Tazama
sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .
Tafadhali fahamu kuwa jukwa zilizowekwa kwenye viota haziauniwi, na mizunguko kwa ujumla haiambatani na viwango vya ufikivu.
Mfano
Majukwaa hayasawazishi vipimo vya slaidi kiotomatiki. Kwa hivyo, unaweza kuhitaji kutumia huduma za ziada au mitindo maalum ili saizi ya yaliyomo ipasavyo. Ingawa jukwa hutumia vidhibiti na viashirio vya awali/vifuatavyo, hazihitajiki kwa uwazi. Ongeza na ubinafsishe unavyoona inafaa.
Darasa .active
linahitaji kuongezwa kwenye mojawapo ya slaidi vinginevyo jukwa halitaonekana. Pia hakikisha umeweka ya kipekee id
kwa .carousel
vidhibiti vya hiari, haswa ikiwa unatumia misururu mingi kwenye ukurasa mmoja. Vipengele vya udhibiti na viashiria lazima viwe na data-bs-target
sifa (au href
kwa viungo) vinavyolingana id
na .carousel
kipengele.
Slaidi pekee
Hapa kuna jukwa lenye slaidi pekee. Kumbuka uwepo wa picha za jukwa .d-block
na .w-100
kwenye jukwa ili kuzuia upangaji wa picha chaguo-msingi wa kivinjari.
<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>
Na vidhibiti
Kuongeza katika vidhibiti vilivyotangulia na vifuatavyo. Tunapendekeza kutumia <button>
vipengele, lakini pia unaweza kutumia <a>
vipengele vilivyo na 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>
Na viashiria
Unaweza pia kuongeza viashiria kwenye jukwa, kando ya vidhibiti, pia.
<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>
Na manukuu
Ongeza manukuu kwenye slaidi zako kwa urahisi na .carousel-caption
kipengele kilicho ndani ya .carousel-item
. Zinaweza kufichwa kwa urahisi kwenye tovuti ndogo za kutazama, kama inavyoonyeshwa hapa chini, na huduma za hiari za kuonyesha . Tunazificha mwanzoni .d-none
na kuzirudisha kwenye vifaa vya ukubwa wa wastani vilivyo na .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>
Mtambuka
Ongeza .carousel-fade
kwenye jukwa lako ili kuhuisha slaidi kwa mpito wa kufifia badala ya slaidi.
<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
Muda wa mtu binafsi
Ongeza data-bs-interval=""
kwa a .carousel-item
ili kubadilisha muda wa kuchelewesha kati ya kuendesha baiskeli kiotomatiki hadi kipengee kinachofuata.
<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>
Zima kutelezesha kidole kwa kugusa
Miduara inaauni kutelezesha kidole kushoto/kulia kwenye vifaa vya skrini ya kugusa ili kusogeza kati ya slaidi. Hii inaweza kulemazwa kwa kutumia data-bs-touch
sifa. Mfano hapa chini pia haujumuishi data-bs-ride
sifa na ina data-bs-interval="false"
hivyo haichezi kiotomatiki.
<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>
Lahaja ya giza
Ongeza .carousel-dark
kwa .carousel
vidhibiti vyeusi zaidi, viashirio na manukuu. Vidhibiti vimegeuzwa kutoka kwa ujazo wao wa chaguo-msingi mweupe na sifa ya filter
CSS. Manukuu na vidhibiti vina viambajengo vya ziada vya Sass ambavyo vinabinafsisha color
na 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>
Mpito maalum
Muda wa mpito wa .carousel-item
unaweza kubadilishwa kwa utofauti wa $carousel-transition-duration
Sass kabla ya kutunga au mitindo maalum ikiwa unatumia CSS iliyokusanywa. Iwapo mabadiliko mengi yatatumika, hakikisha ubadilishaji wa ubadilishaji umefafanuliwa kwanza (km. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Vigezo
$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);
Matumizi
Kupitia sifa za data
Tumia sifa za data ili kudhibiti kwa urahisi nafasi ya jukwa. data-bs-slide
inakubali manenomsingi prev
au next
, ambayo hubadilisha nafasi ya slaidi kulingana na nafasi yake ya sasa. Vinginevyo, tumia data-bs-slide-to
kupitisha faharasa mbichi ya slaidi kwa carousel data-bs-slide-to="2"
, ambayo huhamisha nafasi ya slaidi hadi faharasa fulani inayoanza na 0
.
Sifa data-bs-ride="carousel"
hutumika kutia alama kwenye jukwa kama linalohuisha kuanzia kwenye upakiaji wa ukurasa. Ikiwa data-bs-ride="carousel"
hutumii kuanzisha jukwa lako, lazima uanzishe mwenyewe. Haiwezi kutumika pamoja na (isiyohitajika na isiyo ya lazima) uanzishaji wa JavaScript ya jukwa moja.
Kupitia JavaScript
Piga jukwa mwenyewe na:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Chaguo
Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-bs-
, kama katika data-bs-interval=""
.
Jina | Aina | Chaguomsingi | Maelezo |
---|---|---|---|
interval |
nambari | 5000 |
Muda wa kuchelewa kati ya kuendesha kipengee kiotomatiki. Ikiwa false , jukwa halitazunguka kiotomatiki. |
keyboard |
boolean | true |
Ikiwa jukwa linapaswa kuguswa na matukio ya kibodi. |
pause |
kamba | boolean | 'hover' |
Ikiwekwa kuwa Kwenye vifaa vinavyoweza kugusa, ikiwekwa kuwa |
ride |
kamba | boolean | false |
Hucheza jukwa kiotomatiki baada ya mtumiaji kuzungusha kipengee cha kwanza mwenyewe. Ikiwekwa kuwa 'carousel' , hucheza jukwa kiotomatiki linapopakia. |
wrap |
boolean | true |
Iwapo jukwa linapaswa kuzunguka mfululizo au kusimama kwa bidii. |
touch |
boolean | true |
Ikiwa jukwa linafaa kuauni mwingiliano wa kutelezesha kidole kushoto/kulia kwenye vifaa vya skrini ya kugusa. |
Mbinu
Njia za Asynchronous na mabadiliko
Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .
Unaweza kuunda mfano wa jukwa na mjenzi wa jukwa, kwa mfano, ili kuanzisha na chaguzi za ziada na kuanza kuendesha baiskeli kupitia vitu:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Njia | Maelezo |
---|---|
cycle |
Huzungusha vitu vya jukwa kutoka kushoto kwenda kulia. |
pause |
Husimamisha jukwa lisiendeshe baiskeli kupitia vitu. |
prev |
Mizunguko ya kipengee kilichotangulia. Hurejesha kwa mpigaji simu kabla ya bidhaa iliyotangulia kuonyeshwa (kwa mfano, kabla ya slid.bs.carousel tukio kutokea). |
next |
Mizunguko hadi kipengee kinachofuata. Hurejesha kwa mpigaji simu kabla ya bidhaa inayofuata kuonyeshwa (kwa mfano, kabla ya slid.bs.carousel tukio kutokea). |
nextWhenVisible |
Usizungushe jukwa kwenda linalofuata wakati ukurasa hauonekani au jukwa au mzazi wake hauonekani. Hurejesha kwa mpigaji simu kabla ya kipengee lengwa kuonyeshwa |
to |
Huzungusha jukwa hadi fremu fulani (0 msingi, sawa na safu). Hurejesha kwa mpigaji simu kabla ya kipengee lengwa kuonyeshwa (kwa mfano, kabla ya slid.bs.carousel tukio kutokea). |
dispose |
Huharibu jukwa la kipengele. (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM) |
getInstance |
Njia tuli ambayo hukuruhusu kupata mfano wa jukwa unaohusishwa na kipengee cha DOM, unaweza kuitumia kama hii:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Mbinu tuli ambayo inarejesha tukio la jukwa linalohusishwa na kipengele cha DOM au kuunda jipya iwapo halijaanzishwa. Unaweza kuitumia kama hii:bootstrap.Carousel.getOrCreateInstance(element) |
Matukio
Darasa la jukwa la Bootstrap linafichua matukio mawili ya kuunganisha kwenye utendakazi wa jukwa. Matukio yote mawili yana sifa zifuatazo za ziada:
direction
: Mwelekeo ambao jukwa linateleza (ama"left"
au"right"
).relatedTarget
: Kipengele cha DOM ambacho kinatelezeshwa mahali kama kipengee kinachotumika.from
: Faharasa ya kipengee cha sasato
: Faharasa ya kipengee kinachofuata
Matukio yote ya jukwa hupigwa risasi kwenye jukwa lenyewe (yaani kwenye <div class="carousel">
).
Aina ya tukio | Maelezo |
---|---|
slide.bs.carousel |
Inawaka mara moja wakati slide mbinu ya mfano inatumiwa. |
slid.bs.carousel |
Imechomwa wakati jukwa limekamilisha mpito wake wa slaidi. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})