Carousel

Komponenta projekcije slajdova za kretanje kroz elemente—slike ili slajdove teksta—kao vrtuljak.

Kako radi

Vrteška je projekcija slajdova za kretanje kroz niz sadržaja, izgrađena pomoću CSS 3D transformacija i malo JavaScripta. Radi sa nizom slika, teksta ili prilagođenih oznaka. Takođe uključuje podršku za prethodne/sljedeće kontrole i indikatore.

U pretraživačima u kojima je podržan API za vidljivost stranice , vrtuljak će izbjeći klizanje kada web stranica nije vidljiva korisniku (kao što je kada je kartica pretraživača neaktivna, prozor pretraživača je minimiziran, itd.).

Imajte na umu da ugniježđene vrtuljke nisu podržane, a vrtuljke općenito nisu u skladu sa standardima pristupačnosti.

Na kraju, ako gradite naš JavaScript iz izvora, on zahtijevautil.js .

Primjer

Vrteške ne normaliziraju automatski dimenzije slajda. Kao takvi, možda ćete morati koristiti dodatne uslužne programe ili prilagođene stilove za odgovarajuću veličinu sadržaja. Dok vrtuljke podržavaju prethodne/sljedeće kontrole i indikatore, oni nisu izričito potrebni. Dodajte i prilagodite kako vam odgovara.

Razred .activetreba dodati na jedan od slajdova inače vrtuljak neće biti vidljiv. Također obavezno postavite jedinstveni id .carouselza opcionalne kontrole, posebno ako koristite više vrteški na jednoj stranici. Kontrolni i indikatorski elementi moraju imati data-targetatribut (ili hrefza veze) koji odgovara ID-u .carouselelementa.

Samo slajdovi

Evo vrteške samo sa slajdovima. Obratite pažnju na prisustvo .d-blocki .w-100na karusel slikama da biste sprečili podrazumevano poravnanje slika u pretraživaču.

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

Sa kontrolama

Dodavanje prethodne i sljedeće kontrole:

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

Sa indikatorima

Takođe možete dodati indikatore na vrtuljak, pored kontrola.

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

Sa natpisima

Jednostavno dodajte natpise svojim slajdovima pomoću .carousel-captionelementa unutar bilo kojeg .carousel-item. Mogu se lako sakriti na manjim okvirima za prikaz, kao što je prikazano u nastavku, sa opcionim uslužnim programima za prikaz . U početku ih sakrivamo .d-nonei vraćamo ih na uređaje srednje veličine pomoću .d-md-block.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

Dodajte .carousel-fadena vrtuljak da biste animirali slajdove s prijelazom izblijeđivanja umjesto slajda.

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

Individualni .carousel-iteminterval

Dodajte data-interval=""u a .carousel-itemda promijenite količinu vremena za odgodu između automatskog prelaska na sljedeću stavku.

<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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Upotreba

Preko atributa podataka

Koristite atribute podataka za laku kontrolu položaja vrtuljka. data-slideprihvaća ključne riječi previli next, što mijenja položaj slajda u odnosu na njegovu trenutnu poziciju. Alternativno, koristite data-slide-toza prosljeđivanje sirovog indeksa slajda na vrtuljak data-slide-to="2", koji pomiče poziciju slajda na određeni indeks koji počinje sa 0.

Atribut data-ride="carousel"se koristi za označavanje vrtuljka kao animacije počevši od učitavanja stranice. Ne može se koristiti u kombinaciji sa (suvišnim i nepotrebnim) eksplicitnim JavaScript inicijalizacijom istog vrtuljka.

Preko JavaScripta

Ručno pozovite vrtuljak pomoću:

$('.carousel').carousel()

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScript-a. Za atribute podataka dodajte naziv opcije u data-, kao u data-interval="".

Metode

.carousel(options)

Inicijalizira vrtuljak s opcijskim opcijama objecti počinje se kretati kroz stavke.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Kruži kroz stavke vrteške s lijeva na desno.

.carousel('pause')

Zaustavlja vrtuljku da se kreće kroz stavke.

.carousel(number)

Kruži vrtuljak do određenog okvira (na bazi 0, slično nizu). Vraća se pozivaocu prije nego što je ciljna stavka prikazana (tj. prije nego što se slid.bs.carouseldogodi događaj).

.carousel('prev')

Prelazi na prethodnu stavku. Vraća se pozivaocu prije nego što je prikazana prethodna stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('next')

Prelazi na sljedeću stavku. Vraća se pozivaocu prije nego što je prikazana sljedeća stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('dispose')

Uništava vrtuljak elementa.

Događaji

Bootstrapova carousel klasa izlaže dva događaja za spajanje na funkcionalnost vrteške. Oba događaja imaju sljedeća dodatna svojstva:

• direction: Smjer u kojem vrtuljak klizi (ili "left"ili "right").
• relatedTarget: DOM element koji se postavlja na mjesto kao aktivna stavka.
• from: Indeks trenutne stavke
• to: Indeks sljedeće stavke

Svi događaji vrteške se aktiviraju na samom vrteškom (tj. na <div class="carousel">).

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

Promijenite trajanje prijelaza

Trajanje prijelaza .carousel-itemse može promijeniti pomoću $carousel-transitionvarijable Sass prije kompajliranja ili prilagođenih stilova ako koristite prevedeni CSS. Ako se primjenjuje više prijelaza, provjerite je li prijelaz transformacije definiran prvo (npr. transition: transform 2s ease, opacity .5s ease-out).