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.

Në këtë faqe

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 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 .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-bs-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-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-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-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-fadenë 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-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-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-touchatributin. Shembulli i mëposhtëm gjithashtu nuk përfshin data-bs-rideatributin 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-darknë .carouselpër kontrolle, tregues dhe tituj më të errët. Kontrollet janë përmbysur nga mbushja e tyre e bardhë e paracaktuar me filterveçorinë CSS. Titrat dhe kontrollet kanë variabla shtesë Sass që personalizojnë colordhe background-color.

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="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-itemmund të ndryshohet me $carousel-transition-durationvariablin 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-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-bs-slide-topë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ë `'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 caktohet 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.
`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 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
`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...
})

Karuseli

Si punon

Shembull

Vetëm rrëshqitje

Me kontrolle

Me tregues

Me mbishkrime

Etiketa e parë e rrëshqitjes

Etiketa e rrëshqitjes së dytë

Etiketa e rrëshqitjes së tretë

Crossfade

.carousel-itemInterval individual

Çaktivizo rrëshqitjen me prekje

Variant i errët

Etiketa e parë e rrëshqitjes

Etiketa e rrëshqitjes së dytë

Etiketa e rrëshqitjes së tretë

Tranzicion i personalizuar

Sass

Variablat

Përdorimi

Nëpërmjet atributeve të të dhënave

Përmes JavaScript

Opsione

Metodat

Metodat dhe tranzicionet asinkrone

Ngjarjet

`.carousel-item`Interval individual