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.).

Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja 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 .activeduhet të shtohet në një nga sllajdet përndryshe karuseli nuk do të jetë i dukshëm. Gjithashtu, sigurohuni që të vendosni një unike idnë .carouselkontrollet 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-targetatribut (ose hrefpër lidhje) që përputhet idme .carouselelementin.

Vetëm rrëshqitje

Këtu është një karusel vetëm me rrëshqitje. Vini re praninë e imazheve të karuselit .d-blockdhe 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-captionelementin 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-nonedhe i kthejmë në pajisje të mesme me .d-md-block.

Etiketa e parë e rrëshqitjes

Disa përmbajtje përfaqësuese të mbajtësit të vendndodhjes për rrëshqitjen e parë.

Etiketa e rrëshqitjes së dytë

Disa përmbajtje përfaqësuese të mbajtësit të vendndodhjes për rrëshqitjen e dytë.

Etiketa e rrëshqitjes së tretë

Disa përmbajtje përfaqësuese të mbajtësit të vendndodhjes për rrëshqitjen e tretë.

<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-fadenë 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-bodyose disa CSS të personalizuara në .carousel-items 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-itempë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-touchatributin. Shembulli i mëposhtëm gjithashtu nuk përfshin data-rideatributin 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-slidepranon fjalët kyçe prevose next, që ndryshon pozicionin e rrëshqitjes në lidhje me pozicionin e tij aktual. Përndryshe, përdorni data-slide-topë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ë `'hover'`, vendos në pauzë lëvizjen e karuselit `mouseenter`dhe rifillon lëvizjen e karuselit në `mouseleave`. Nëse vendoset në `false`, qëndrimi pezull mbi karusel nuk do ta ndalojë atë. Në pajisjet me prekje, kur vendoset në `'hover'`, çiklizmi do të ndalet `touchend`(pasi përdoruesi të përfundojë bashkëveprimin me karuselin) për dy intervale, përpara se të rifillojë automatikisht. Vini re se kjo është përveç sjelljes së mësipërme të miut.
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 objectdhe 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.carouselndodhë 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.carouselndodhë 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.carouselndodhë 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.carouselndodhë 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.carouselndodhë 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 aktual
to: 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-itemmund të ndryshohet me $carousel-transitionvariablin 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).