Karuseli
Një komponent i shfaqjes së rrëshqitjes për kalimin me biçikletë nëpër elementë - imazhe ose rrëshqitje teksti - si një karusel.
Si punon
Karuseli është një shfaqje rrëshqitëse për çiklizëm nëpër një seri përmbajtjesh, e ndërtuar me transformime CSS 3D dhe pak JavaScript. Ai funksionon me një seri imazhesh, teksti ose shënimesh të personalizuara. Ai gjithashtu përfshin mbështetje për kontrollet dhe treguesit e mëparshëm/të ardhshëm.
Në shfletuesit ku mbështetet API-ja e dukshmërisë së faqes , karuseli do të shmangë rrëshqitjen kur faqja e internetit nuk është e dukshme për përdoruesin (si p.sh. kur skeda e shfletuesit është joaktive, dritarja e shfletuesit është minimizuar, etj.).
prefers-reduced-motion
pyetja e medias. Shikoni
seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .
Ju lutemi, kini parasysh se karuselat e mbivendosur nuk mbështeten dhe karuselet në përgjithësi nuk janë në përputhje me standardet e aksesueshmërisë.
Së fundi, nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkonutil.js
.
Shembull
Karuselet nuk normalizojnë automatikisht dimensionet e rrëshqitjes. Si i tillë, mund t'ju duhet të përdorni shërbime shtesë ose stile të personalizuara për madhësinë e duhur të përmbajtjes. Ndërsa karuselat mbështesin kontrollet dhe treguesit e mëparshëm/të ardhshëm, ato nuk kërkohen në mënyrë eksplicite. Shtoni dhe personalizoni sipas mendimit tuaj.
Klasa .active
duhet të shtohet në një nga sllajdet përndryshe karuseli nuk do të jetë i dukshëm. Gjithashtu, sigurohuni që të vendosni një unike id
në .carousel
kontrollet opsionale, veçanërisht nëse jeni duke përdorur karusele të shumta në një faqe të vetme. Elementet e kontrollit dhe treguesit duhet të kenë një data-target
atribut (ose href
për lidhje) që përputhet id
me .carousel
elementin.
Vetëm rrëshqitje
Këtu është një karusel vetëm me rrëshqitje. Vini re praninë e imazheve të karuselit .d-block
dhe në për të parandaluar shtrirjen e paracaktuar të imazhit të shfletuesit..w-100
<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>
Me kontrolle
Shtimi i kontrolleve të mëparshme dhe të ardhshme. Ne rekomandojmë përdorimin <button>
e elementeve, por mund të përdorni edhe <a>
elementë me 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>
Me tregues
Gjithashtu, mund t'i shtoni treguesit në karusel, së bashku me kontrollet.
<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>
Me mbishkrime
Shtoni titrat në rrëshqitjet tuaja me lehtësi me .carousel-caption
elementin brenda çdo .carousel-item
. Ato mund të fshihen lehtësisht në porta më të vogla të shikimit, siç tregohet më poshtë, me programe opsionale të ekranit . Ne i fshehim ato fillimisht me .d-none
dhe i kthejmë në pajisje të mesme me .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>
Crossfade
Shtoni .carousel-fade
në karuselin tuaj për të animuar rrëshqitjet me një tranzicion fade në vend të një rrëshqitjeje. Në varësi të përmbajtjes tuaj të karuselit (p.sh., rrëshqitje vetëm me tekst), mund të dëshironi të shtoni .bg-body
ose disa CSS të personalizuara në .carousel-item
s për ndërthurjen e duhur.
<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
Interval individual
Shto data-interval=""
te a .carousel-item
për të ndryshuar sasinë e kohës për të vonuar ndërmjet çiklizmit automatik në artikullin tjetër.
<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>
Çaktivizo rrëshqitjen me prekje
Karuselet mbështesin rrëshqitjen majtas/djathtas në pajisjet me ekran me prekje për të lëvizur midis rrëshqitjeve. Kjo mund të çaktivizohet duke përdorur data-touch
atributin. Shembulli i mëposhtëm gjithashtu nuk përfshin data-ride
atributin dhe ka data-interval="false"
kështu që nuk luhet automatikisht.
<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>
Përdorimi
Nëpërmjet atributeve të të dhënave
Përdorni atributet e të dhënave për të kontrolluar me lehtësi pozicionin e karuselit. data-slide
pranon fjalët kyçe prev
ose next
, që ndryshon pozicionin e rrëshqitjes në lidhje me pozicionin e tij aktual. Përndryshe, përdorni data-slide-to
për të kaluar një indeks të papërpunuar të rrëshqitjes te karuseli data-slide-to="2"
, i cili e zhvendos pozicionin e rrëshqitjes në një indeks të veçantë duke filluar me 0
.
Atributi data-ride="carousel"
përdoret për të shënuar një karusel si animues duke filluar nga ngarkimi i faqes. Nëse nuk e përdorni data-ride="carousel"
për të inicializuar karuselin tuaj, duhet ta inicializoni vetë. Nuk mund të përdoret në kombinim me inicializimin e qartë JavaScript (të tepërt dhe të panevojshëm) të të njëjtit karusel.
Përmes JavaScript
Thirrni karuselin manualisht me:
$('.carousel').carousel()
Opsione
Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-
, si në data-interval=""
.
Emri | Lloji | E paracaktuar | Përshkrim |
---|---|---|---|
intervali | numri | 5000 | Sasia e kohës për të vonuar ndërmjet çiklizmit automatik të një artikulli. Nëse false , karuseli nuk do të qarkullojë automatikisht. |
tastierë | logjike | e vërtetë | Nëse karuseli duhet të reagojë ndaj ngjarjeve të tastierës. |
pauzë | varg | logjike | 'rri rri pezull' | Nëse caktohet në Në pajisjet me prekje, kur vendoset në |
ngasin | varg | i rremë | Luan automatikisht karuselin pasi përdoruesi të ciklojë manualisht artikullin e parë. Nëse caktohet në 'carousel' , luan automatikisht karuselin në ngarkim. |
mbështjell | logjike | e vërtetë | Nëse karuseli duhet të qarkullojë vazhdimisht ose të ketë ndalesa të vështira. |
prekje | logjike | e vërtetë | Nëse karuseli duhet të mbështesë ndërveprimet e rrëshqitjes majtas/djathtas në pajisjet me ekran me prekje. |
Metodat
Metodat dhe tranzicionet asinkrone
Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .
Shikoni dokumentacionin tonë JavaScript për më shumë informacion .
.carousel(options)
Inicializon karuselin me një opsion opsional object
dhe fillon të lëvizë me biçikletë nëpër artikuj.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Ciklet nëpër artikujt e karuselit nga e majta në të djathtë.
.carousel('pause')
Ndalon karuselin të lëvizë me biçikletë nëpër artikuj.
.carousel(number)
Ciklizon karuselin në një kornizë të caktuar (bazuar në 0, e ngjashme me një grup). Kthehet te thirrësi përpara se të shfaqet artikulli i synuar (dmth. përpara se të slid.bs.carousel
ndodhë ngjarja).
.carousel('prev')
Ciklet në artikullin e mëparshëm. Kthehet te thirrësi përpara se të shfaqet artikulli i mëparshëm (dmth. përpara se të slid.bs.carousel
ndodhë ngjarja).
.carousel('next')
Ciklet te artikulli tjetër. Kthehet te thirrësi përpara se të shfaqet artikulli tjetër (dmth. përpara se të slid.bs.carousel
ndodhë ngjarja).
.carousel('dispose')
Shkatërron karuselin e një elementi.
.carousel('nextWhenVisible')
Mos e çoni karuselin në tjetrën kur faqja nuk është e dukshme ose karuseli ose prindi i tij nuk janë të dukshëm. Kthehet te thirrësi përpara se të shfaqet artikulli tjetër (dmth. përpara se të slid.bs.carousel
ndodhë ngjarja).
.carousel('to')
Ciklizon karuselin në një kornizë të caktuar (bazuar në 0, e ngjashme me një grup). Kthehet te thirrësi përpara se të shfaqet artikulli tjetër (dmth. përpara se të slid.bs.carousel
ndodhë ngjarja).
Ngjarjet
Klasa e karuselit të Bootstrap ekspozon dy ngjarje për t'u lidhur me funksionalitetin e karuselit. Të dyja ngjarjet kanë karakteristikat e mëposhtme shtesë:
direction
: Drejtimi në të cilin rrëshqet karuseli (ose"left"
ose"right"
).relatedTarget
: Elementi DOM që po futet në vend si artikull aktiv.from
: Indeksi i artikullit aktualto
: Indeksi i artikullit pasardhës
Të gjitha ngjarjet e karuselit shkrepen në vetë karuselin (dmth. në <div class="carousel">
).
Lloji i ngjarjes | Përshkrim |
---|---|
rrëshqitje.bs.carousel | Kjo ngjarje ndizet menjëherë kur slide thirret metoda e shembullit. |
rrëshqiti.bs.carousel | Kjo ngjarje aktivizohet kur karuseli ka përfunduar tranzicionin e tij të rrëshqitjes. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Ndrysho kohëzgjatjen e tranzicionit
Kohëzgjatja e tranzicionit të .carousel-item
mund të ndryshohet me $carousel-transition
variablin Sass përpara kompilimit ose stilet e personalizuara nëse jeni duke përdorur CSS të përpiluar. Nëse aplikohen tranzicione të shumta, sigurohuni që tranzicioni i transformimit të jetë përcaktuar së pari (p.sh. transition: transform 2s ease, opacity .5s ease-out
).