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 karuselet e mbivendosur nuk mbështeten dhe karuselat në përgjithësi nuk janë në përputhje me standardet e aksesueshmërisë.
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-bs-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-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 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-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 tregues
Gjithashtu, mund t'i shtoni treguesit në karusel, së bashku me kontrollet.
<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 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-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>
Crossfade
Shtoni .carousel-fade
në karuselin tuaj për të animuar rrëshqitjet me një tranzicion fade në vend të një rrëshqitjeje.
<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
Interval individual
Shto data-bs-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-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>
Ç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-bs-touch
atributin. Shembulli i mëposhtëm gjithashtu nuk përfshin data-bs-ride
atributin dhe ka data-bs-interval="false"
kështu që nuk luhet automatikisht.
<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>
Variant i errët
Shtoni .carousel-dark
në .carousel
për kontrolle, tregues dhe tituj më të errët. Kontrollet janë përmbysur nga mbushja e tyre e bardhë e paracaktuar me filter
veçorinë CSS. Titrat dhe kontrollet kanë variabla shtesë Sass që personalizojnë color
dhe 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>
Tranzicion i personalizuar
Kohëzgjatja e tranzicionit të .carousel-item
mund të ndryshohet me $carousel-transition-duration
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
).
Sass
Variablat
$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);
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-bs-slide
pranon fjalët kyçe prev
ose next
, e cila ndryshon pozicionin e rrëshqitjes në lidhje me pozicionin e tij aktual. Përndryshe, përdorni data-bs-slide-to
për të kaluar një indeks të papërpunuar të rrëshqitjes te karuseli data-bs-slide-to="2"
, i cili e zhvendos pozicionin e rrëshqitjes në një indeks të veçantë duke filluar me 0
.
Atributi data-bs-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-bs-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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
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-bs-
, si në data-bs-interval=""
.
Emri | Lloji | E paracaktuar | Përshkrim |
---|---|---|---|
interval |
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. |
keyboard |
logjike | true |
Nëse karuseli duhet të reagojë ndaj ngjarjeve të tastierës. |
pause |
varg | logjike | 'hover' |
Nëse caktohet në Në pajisjet me prekje, kur caktohet në |
ride |
varg | logjike | false |
Luan automatikisht karuselin pasi përdoruesi të ciklojë manualisht artikullin e parë. Nëse caktohet në 'carousel' , luan automatikisht karuselin në ngarkim. |
wrap |
logjike | true |
Nëse karuseli duhet të qarkullojë vazhdimisht ose të ketë ndalesa të vështira. |
touch |
logjike | true |
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 .
Ju mund të krijoni një shembull karuseli me konstruktorin e karuselit, për shembull, për të inicializuar me opsione shtesë dhe për të filluar me biçikletë nëpër artikuj:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metoda | Përshkrim |
---|---|
cycle |
Ciklet nëpër artikujt e karuselit nga e majta në të djathtë. |
pause |
Ndalon karuselin të lëvizë me biçikletë nëpër artikuj. |
prev |
Ciklet në artikullin e mëparshëm. Kthehet te thirrësi përpara se të shfaqet artikulli i mëparshëm (p.sh., përpara se të slid.bs.carousel ndodhë ngjarja). |
next |
Ciklet te artikulli tjetër. Kthehet te thirrësi përpara se të shfaqet artikulli tjetër (p.sh., përpara se të slid.bs.carousel ndodhë ngjarja). |
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 i synuar |
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 objekti i synuar (p.sh., përpara se të slid.bs.carousel ndodhë ngjarja). |
dispose |
Shkatërron karuselin e një elementi. (Heq të dhënat e ruajtura në elementin DOM) |
getInstance |
Metoda statike e cila ju lejon të merrni shembullin e karuselit të lidhur me një element DOM, mund ta përdorni si kjo:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Metoda statike e cila kthen një shembull karuseli të lidhur me një element DOM ose krijon një të ri në rast se nuk ishte inicializuar. Mund ta përdorni si kjo:bootstrap.Carousel.getOrCreateInstance(element) |
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 |
---|---|
slide.bs.carousel |
Ndizet menjëherë kur slide thirret metoda e shembullit. |
slid.bs.carousel |
U ndez kur karuseli ka përfunduar kalimin e tij në rrëshqitje. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})