Carousel
Qayb ka mid ah bandhigyada slideshow ee baaskiilka lagu dhex wado canaasirta-sawirrada ama sawirada qoraalka-sida carousel-ka.
Sida ay u shaqeyso
Carouselku waa sawir-qaade loogu talagalay baaskiil wadista iyada oo loo marayo taxane taxane ah, oo lagu dhisay isbeddellada CSS 3D iyo xoogaa JavaScript ah. Waxay la shaqaysaa sawirro taxane ah, qoraal, ama calaamadayn gaar ah. Waxa kale oo ka mid ah taageerada kontaroolada hore/xiga iyo tilmaamayaasha.
Barowsarrada halka laga taageero Page Visibility API , carouselku wuxuu iska ilaalin doonaa simbiriirixinta marka bogga mareegaha uusan u muuqan isticmaaluhu (sida marka tabka browserku aanu shaqayn, daaqada browserka waa la yareeyey, iwm.).
prefers-reduced-motion
waydiinta warbaahinta. Eeg
qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .
Fadlan la soco in carousels buul leh aan la taageerin, iyo carousels guud ahaan ma waafaqsana heerarka gelitaanka.
Ugu dambeyntii, haddii aad ka dhisayso JavaScript-kayaga isha, waxay u baahan tahayutil.js
.
Tusaale
Carousels si toos ah uma caadiyeeyaan cabbirrada slide. Sidan oo kale, waxaa laga yaabaa inaad u baahato inaad isticmaasho yutiilitida dheeraadka ah ama qaababka gaarka ah si aad u cabbirto nuxurka saxda ah. Halka carousels ay taageerto kontaroolada hore/xiga iyo tilmaamayaasha, si cad looguma baahna. Ku dar oo habbee sida aad ku habboon tahay.
Fasalka .active
wuxuu u baahan yahay in lagu daro mid ka mid ah boggaga haddii kale carouselku ma muuqan doono. Sidoo kale hubi inaad dejiso mid u gaar id
ah .carousel
kontaroolada ikhtiyaariga ah, gaar ahaan haddii aad isticmaalayso carousels badan hal bog. Cunsurada xakamaynta iyo tilmaamuhu waa inay lahaadaan data-target
sifo (ama href
xidhiidhinta) oo ku habboon id
curiyaha .carousel
.
Islaaydh kaliya
Halkan waxaa ah carousel oo leh sawirro kaliya. Ogsoonow joogitaanka .d-block
iyo .w-100
sawirada carouselka si aad uga hortagto toosinta sawirka browserka.
<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>
Xakamaynta
Ku darida kontaroolada hore iyo kan xiga. Waxaan kugula talineynaa inaad isticmaasho <button>
walxaha, laakiin waxaad sidoo kale isticmaali kartaa <a>
walxaha leh 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>
Iyadoo tilmaamayaasha
Waxa kale oo aad ku dari kartaa tilmaamayaasha carouselka, oo ay weheliyaan kontaroolada, sidoo kale.
<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>
Qoraalo wata
Ku dar qoraallada boggagaaga si fudud oo leh .carousel-caption
curiyaha ku jira mid kasta .carousel-item
. Waxay si fudud loogu qarin karaa daawashada yaryar, sida hoos ku cad, oo leh qalab bandhig oo ikhtiyaari ah . Waanu ku qarinaa marka hore oo aanu .d-none
ku soo celinaa aaladaha dhexdhexaadka ah ee leh .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>
Isgoysyada
Ku darso .carousel-fade
carouselkaaga si aad u nooleeyso sawiro leh isbedel libdhaya halkii aad ka saari lahayd. Iyada oo ku xidhan nuxurka carouselkaaga (tusaale, qoraalka kaliya ee bogga), waxa laga yaabaa inaad rabto inaad ku darto .bg-body
ama qaar ka mid ah CSS-yada caado u ah .carousel-item
s si ay ugu habboonaato isdhaafsiga.
<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
Dhexdhexaad shaqsiyeed
Ku dar data-interval=""
a .carousel-item
si aad u bedesho qadarka wakhtiga dib u dhigista inta u dhaxaysa si toos ah baaskiil wadida ilaa shayga xiga.
<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>
Dami ku dhufanka taabashada
Carousels waxay taageertaa ku dhufashada bidix/midig ee aaladaha shaashadda taabashada si ay u dhex maraan sawirada. Tan waa la joojin karaa iyadoo la adeegsanayo data-touch
sifada. Tusaalaha hoose sidoo kale kuma jiraan sifada data-ride
oo wuxuu leeyahay data-interval="false"
si uusan u ciyaarin.
<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>
Isticmaalka
Iyada oo loo marayo sifooyinka xogta
Isticmaal sifada xogta si aad si fudud u xakamayso booska carouselka. data-slide
aqbala ereyada furaha prev
ama next
, kaas oo beddela booska slide marka loo eego booska uu hadda joogo. Haddii kale, isticmaal data-slide-to
si aad u gudbiso tusmaynta slide ceeriin ee carousel data-slide-to="2"
, kaas oo u beddelaya booska slide tusme gaar ah oo ka bilaabmaya 0
.
Sifada data-ride="carousel"
waxa loo isticmaalaa in lagu calaamadiyo carousel-ka sida firfircoon ee ka bilaabmaya culayska bogga. Haddii aadan isticmaalin data-ride="carousel"
inaad ku bilawdo carouselkaaga, waa inaad adigu bilawdaa. Looma isticmaali karo marka lagu daro (kaadiraan iyo aan loo baahnayn) bilawga JavaScript cad ee isla carouselka.
Iyadoo loo marayo JavaScript
Si gacanta ah ula wac carousel:
$('.carousel').carousel()
Ikhtiyaarada
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-
, sida ku jira data-interval=""
.
Magaca | Nooca | Asal ahaan | Sharaxaada |
---|---|---|---|
dhexda | tirada | 5000 | Qadarka wakhtiga dib u dhigista udhaxaysa si toos ah shay baaskiil wadida. Haddii false , carousel si toos ah uma wareegi doono. |
kiiboodhka | booliyan | run | Haddii carouselku uu ka falcelinayo dhacdooyinka kiiboodhka. |
hakad | xadhig | booliyan | 'hali' | Haddii la dejiyo Aaladaha taabanaya, marka lagu |
fuulid | xadhig | been ah | Si otomaatig ah u garaaca karoosalka ka dib marka isticmaaluhu uu gacanta ku wareego shayga ugu horreeya. Haddii lagu 'carousel' rakibo , wuxuu si otomaatig ah u ciyaari karaa carousel-ka isagoo rarnaa. |
duub | booliyan | run | Haddii carouselku si joogto ah u wareego ama uu yeesho joogsi adag. |
taabo | booliyan | run | Haddii carouselku uu taageero is dhexgalka bidix/midig ee aaladaha muraayadda taabashada. |
Hababka
Hababka iyo kala-guurka aan isku midka ahayn
Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .
Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .
.carousel(options)
Waxay ku bilawday carousel-ka ikhtiyaar ikhtiyaari ah object
oo bilaabay inuu ku dhex wado alaabta.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Wareegtada dhex mara alaabta carouselka bidix ilaa midig.
.carousel('pause')
Karoosalka ka joojiya in uu baaskiil ku dhex maro alaabta.
.carousel(number)
Wareega karooselka si uu u sameeyo jir gaar ah (0 ku salaysan, oo la mid ah array). Ku soo noqda qofka soo wacay ka hor inta aan la tusin shayga la beegsaday (tusaale ka hor intaanay slid.bs.carousel
dhacdada dhicin).
.carousel('prev')
Wareegto shayga hore Ku soo noqda qofka soo wacay ka hor inta aan shaygii hore la muujin (tusaale ka hor intaanay slid.bs.carousel
dhacdada dhicin).
.carousel('next')
Wareegto shayga xiga Ku soo noqda qofka soo wacay ka hor inta aan shayga xiga la muujin (tusaale ka hor intaanay slid.bs.carousel
shilku dhicin).
.carousel('dispose')
Waxay baabi'isaa carousel-ka curiyaha.
.carousel('nextWhenVisible')
Ha u wadin karoosalka ku xiga marka aanu boggu muuqan ama karoosalka ama waalidkeed aanu muuqan. Ku soo noqda qofka soo wacay ka hor inta aan shayga xiga la muujin (tusaale ka hor intaanay slid.bs.carousel
shilku dhicin).
.carousel('to')
Wareega karooselka si uu u sameeyo jir gaar ah (0 ku salaysan, oo la mid ah array). Ku soo noqda qofka soo wacay ka hor inta aan shayga xiga la muujin (tusaale ka hor intaanay slid.bs.carousel
shilku dhicin).
Dhacdooyinka
Fasalka carousel ee Bootstrap wuxuu daaha ka qaadaa laba dhacdo oo loogu talagalay ku-qabsiga shaqada carousel-ka. Labada dhacdoba waxay leeyihiin waxyaabo dheeraad ah oo soo socda:
direction
: Jihada uu carouselku u simbiriirixanayo (ama"left"
ama"right"
).relatedTarget
: Cunsurka DOM ee meesha lagu sibiibi sida shayga firfircoon.from
: Tusmada shayga hadda jirato
: Tusmada shayga xiga
Dhammaan dhacdooyinka carousel-ka waxaa lagu ridaa carouselka laftiisa (ie at the <div class="carousel">
).
Nooca Dhacdada | Sharaxaada |
---|---|
slide.bs.carousel | Dhacdadani waxay isla markiiba gubtaa marka slide habka tusaalaha loo yeedho. |
slid.bs.carousel | Dhacdadan ayaa la eryaa marka carouselku dhammeeyo kala-guurka slide-ka. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Beddel muddada kala guurka
Muddada kala guurka .carousel-item
waxa lagu beddeli karaa $carousel-transition
doorsoomaha Sass ka hor inta aan la ururin ama qaababka caadiga ah haddii aad isticmaalayso CSS-ka la soo ururiyey. Haddii kala-guuro badan la dabaqo, hubi in isbeddelka beddelka la qeexay marka hore (tus. transition: transform 2s ease, opacity .5s ease-out
).