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.

Klasa .activeduhet të shtohet në një nga sllajdet përndryshe karuseli nuk do të jetë i dukshëm. Gjithashtu, 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. Elementet e kontrollit dhe treguesit duhet të kenë një data-targetatribut (ose hrefpër lidhje) që përputhet me ID-në e .carouselelementit.

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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

Crossfade

Shtoni .carousel-fadenë karuselin tuaj për të animuar rrëshqitjet me një tranzicion fade në vend të një rrëshqitjeje.

E mëparshme Tjetra

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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…
})

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