I-Carousel
Icandelo lomboniso wesilayidi sokuhamba ngebhayisekile kwizinto-imifanekiso okanye izilayidi zombhalo-njengecarousel.
Ingaba isebenza kanjani
I-carousel ngumboniso wesilayidi sokuhamba ngebhayisikile ngoluhlu lomxholo, owakhiwe nge-CSS 3D ukuguqulwa kunye nentwana yeJavaScript. Isebenza ngothotho lwemifanekiso, isicatshulwa, okanye imarkup yesiko. Ikwabandakanya inkxaso yolawulo lwangaphambili / olulandelayo kunye nezalathi.
Kwiziphequluli apho i- Page Visibility API ixhaswa khona, i-carousel iya kuphepheka i-sliding xa iphepha lewebhu lingabonakali kumsebenzisi (njengaxa ithebhu ye-browser ingasebenzi, iwindow yesiphequluli iyancitshiswa, njl. njl.).
prefers-reduced-motion
kumbuzo wemidiya. Jonga icandelo
leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .
Nceda uqaphele ukuba iicarousels ezifakwe kwindlwane azixhaswanga, kwaye iicarousels azihambelani nemigangatho yokufikeleleka.
Okokugqibela, ukuba wakha iJavaScript yethu kwimvelaphi, ifunautil.js
.
Umzekelo
Iicarousels azizenzeli ngokuzenzekelayo imilinganiselo yesilayidi. Ngaloo ndlela, kunokufuneka usebenzise izixhobo ezongezelelweyo okanye izitayile zesiko ukuze ulinganise ngokufanelekileyo umxholo. Ngelixa ii-carousels zixhasa ulawulo lwangaphambili/olulandelayo kunye nezalathi, azifuneki ngokucacileyo. Yongeza kwaye wenze ngokwezifiso njengoko ubona kufanelekile.
Iklasi .active
kufuneka yongezwe kwesinye sezilayidi kungenjalo i-carousel ayiyi kubonakala. Kwakhona qiniseka ukuba useta eyodwa id
kulawulo .carousel
olukhethwayo, ngakumbi ukuba usebenzisa iicarousel ezininzi kwiphepha elinye. Ulawulo kunye neempawu zesalathisi kufuneka data-target
zibenophawu (okanye href
amakhonkco) ahambelana id
nesici .carousel
.
Izilayidi kuphela
Nantsi i-carousel enezilayidi kuphela. Qaphela ubukho .d-block
kunye .w-100
nemifanekiso ye-carousel ukunqanda ulungelelwaniso lomfanekiso olungagqibekanga lwesikhangeli.
<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>
Ngolawulo
Ukongeza kulawulo lwangaphambili nolulandelayo. Sincoma ukusebenzisa <button>
izinto, kodwa ungasebenzisa kwakhona <a>
izinto ezine 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>
Ngezalathi
Unokongeza izikhombisi kwi-carousel, ecaleni kolawulo, kwakhona.
<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>
Neentloko-magama
Yongeza ii-captions kwizilayidi zakho ngokulula ngento .carousel-caption
engaphakathi kuyo nayiphi na .carousel-item
. Zinokufihlwa ngokulula kwizibuko zokujonga ezincinci, njengoko kubonisiwe ngezantsi, ngezixhobo zokubonisa ozikhethelayo . Sizifihla ekuqaleni .d-none
kwaye sizibuyisele kwizixhobo ezinobungakanani obuphakathi kunye .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>
I-Crossfade
Yongeza .carousel-fade
kwi-carousel yakho ukuze uphilise izilayidi ngotshintsho olumnyama endaweni yesilayidi. Kuxhomekeka kumxholo wakho wecarousel (umzekelo, okubhaliweyo kuphela izilayidi), unokufuna ukudibanisa .bg-body
okanye isiko leCSS kwi .carousel-item
s ngokunqamleza okufanelekileyo.
<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
Ikhefu lomntu ngamnye
Yongeza data-interval=""
kwi- .carousel-item
a ukutshintsha ubungakanani bexesha lokulibazisa phakathi kokukhwela ibhayisekile ngokuzenzekelayo ukuya kwinto elandelayo.
<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>
Khubaza ukuswayipha kokuchukumisa
Iicarousels zixhasa ukuswayipha ngasekhohlo/ekunene kwizixhobo zescreen sokuchukumisa ukuhamba phakathi kwezilayidi. Oku kunokucinywa kusetyenziswa data-touch
uphawu loyelelwano. Lo mzekelo ungezantsi nawo awubandakanyi data-ride
uphawu kwaye unayo data-interval="false"
ngoko ayidlali ngokuzenzekelayo.
<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>
Ukusetyenziswa
Ngeempawu zedatha
Sebenzisa iimpawu zedatha ukulawula ngokulula indawo ye-carousel. data-slide
yamkela amagama angundoqo prev
okanye next
, eguqula indawo yesilayidi ngokunxulumene nendawo yaso yangoku. Kungenjalo, sebenzisa data-slide-to
ukudlulisa isalathiso sesilayidi ekrwada kwicarousel data-slide-to="2"
, etshintsha indawo yesilayidi kwisalathiso esithile esiqala nge 0
.
Uphawu data-ride="carousel"
loyelelwano lusetyenziselwa ukuphawula i-carousel njengento ephilayo ukuqala kumthwalo wephepha. Ukuba awusebenzisi data-ride="carousel"
ukuqalisa i-carousel yakho, kufuneka uyiqalise ngokwakho. Ayinakusetyenziswa ngokudityaniswa ne (ingafunekiyo nengafunekiyo) iJavaScript ecacileyo yokuqaliswa kwecarousel enye.
NgeJavaScript
Fowunela i-carousel ngesandla nge:
$('.carousel').carousel()
Iinketho
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-
, njengakwi data-interval=""
.
Igama | Uhlobo | Ukuhlala kukho | Inkcazo |
---|---|---|---|
isithuba | inani | 5000 | Ubungakanani bexesha lokulibaziseka phakathi kokubhayisela ngokuzenzekelayo into. Ukuba false , i-carousel ayiyi kujikeleza ngokuzenzekelayo. |
ikhibhodi | boolean | yinyani | Nokuba i-carousel kufuneka isabele kwiziganeko ze-keyboard. |
nqumama | umtya | boolean | 'hamba phezulu' | Ukuba imiselwe Kwizixhobo ezisebenza ngokuchukumisa, xa zimiselwe |
khwela | umtya | bubuxoki | Idlala ngokuzenzekelayo i-carousel emva kokuba umsebenzisi ajikelise ngesandla into yokuqala. Ukuba imiselwe ku- 'carousel' , idlala ngokuzenzekelayo ikharouse elayishiweyo. |
usonga | boolean | yinyani | Nokuba i-carousel kufuneka iqhubeke ijikeleza okanye ibe neendawo zokumisa nzima. |
touch | boolean | yinyani | Nokuba i-carousel kufuneka ixhase ukuswayipha ekhohlo/ekunene kwizixhobo zescreen sokuchukumisa. |
Iindlela
Iindlela ze-Asynchronous kunye notshintsho
Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .
.carousel(options)
Uqalisa i-carousel ngeendlela ozikhethelayo object
kwaye uqalise ukukhwela ibhayisekile kwizinto.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.
.carousel('pause')
Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.
.carousel(number)
Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu). Ubuyela kumnxeba phambi kokuba into ekujoliswe kuyo iboniswe (okt phambi kokuba slid.bs.carousel
isiganeko senzeke).
.carousel('prev')
Imijikelo ukuya kwinto yangaphambili. Ubuyela kumnxeba phambi kokuba kuboniswe into yangaphambili (okt phambi kokuba slid.bs.carousel
isiganeko senzeke).
.carousel('next')
Biyela ukuya kwinto elandelayo. Ubuyela kumnxeba phambi kokuba kuboniswe into elandelayo (okt phambi kokuba slid.bs.carousel
isiganeko senzeke).
.carousel('dispose')
Uyonakalisa i-carousel yento.
.carousel('nextWhenVisible')
Musa ukujikela i-carousel ukuya kwelinye xa iphepha lingabonakali okanye i-carousel okanye umzali wayo engabonakali. Ubuyela kumnxeba phambi kokuba kuboniswe into elandelayo (okt phambi kokuba slid.bs.carousel
isiganeko senzeke).
.carousel('to')
Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu). Ubuyela kumnxeba phambi kokuba kuboniswe into elandelayo (okt phambi kokuba slid.bs.carousel
isiganeko senzeke).
Iziganeko
Iklasi ye-carousel ye-Bootstrap iveza iminyhadala emibini yokuhuka ekusebenzeni kwecarousel. Zombini ezi ziganeko zineempawu ezongezelelweyo zilandelayo:
direction
: Isalathiso apho icarousel islayida (nokuba"left"
okanye"right"
).relatedTarget
: Isiqalelo seDOM esityibilikiswa kwindawo njengomba osebenzayo.from
: Isalathiso sento yangokuto
: Isalathiso senqaku elilandelayo
Yonke imisitho yecarousel ikhutshwa kwicarousel ngokwayo (okt kwi <div class="carousel">
).
Uhlobo loMnyhadala | Inkcazo |
---|---|
isilayidi.bs.carousel | Esi siganeko sitshatyalaliswa ngoko nangoko xa kusenziwa slide indlela yomzekelo. |
slid.bs.carousel | Esi siganeko sigxothwa xa i-carousel igqibile inguqu yayo yesilayidi. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Guqula ubude bexesha lotshintsho
Ubude bexesha benguqu bunokutshintshwa ngokuguquguquka kwe .carousel-item
- $carousel-transition
Sass phambi kokuhlanganiswa okanye izimbo zesiko ukuba usebenzisa i-CSS ehlanganisiweyo. Ukuba iinguqu ezininzi zisetyenziswa, qiniseka ukuba inguqu yenguqu ichazwa kuqala (umz. transition: transform 2s ease, opacity .5s ease-out
).