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

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

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.

Sigurohuni që të vendosni një ID unike në .carouselkontrollet opsionale, veçanërisht nëse jeni duke përdorur karusele të shumta në një faqe të vetme.

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..img-fluid

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Me kontrolle

Shtimi në kontrollet e mëparshme dhe të ardhshme:

E mëparshme Tjetra

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Me tregues

Gjithashtu, mund t'i shtoni treguesit në karusel, së bashku me kontrollet.

E mëparshme Tjetra

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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

Nulla vitae elit libero, një pharetra augue mollis interdum.

Etiketa e rrëshqitjes së dytë

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiketa e rrëshqitjes së tretë

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

E mëparshme Tjetra

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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, e cila 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. 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="".

Metodat

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

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})