Karusel

Komponenta dijaprojekcije za kruženje kroz elemente—slike ili slajdove teksta—poput vrtuljka.

Kako radi

Vrtuljak je dijaprojekcija za kruženje kroz niz sadržaja, izgrađen pomoću CSS 3D transformacija i malo JavaScripta. Radi s nizom slika, teksta ili prilagođenih oznaka. Također uključuje podršku za prethodne/sljedeće kontrole i indikatore.

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

Imajte na umu da ugniježđeni vrtuljci nisu podržani, a vrtuljci općenito nisu u skladu sa standardima pristupačnosti.

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

Primjer

Vrtuljci ne normaliziraju automatski dimenzije slajdova. Kao takvi, možda ćete trebati koristiti dodatne pomoćne programe ili prilagođene stilove za odgovarajuću veličinu sadržaja. Iako vrtuljci podržavaju prethodne/sljedeće kontrole i indikatore, oni nisu izričito potrebni. Dodajte i prilagodite kako vam odgovara.

Klasu .activeje potrebno dodati na jedan od slajdova inače vrtuljak neće biti vidljiv. Također svakako postavite jedinstveni ID na .carouselizborne kontrole, posebno ako koristite više karusela na jednoj stranici. Kontrolni i indikatorski elementi moraju imati data-targetatribut (ili hrefza veze) koji odgovara ID-u .carouselelementa.

Samo slajdovi

Ovdje je vrtuljak samo s toboganima. Obratite pozornost na prisutnost .d-blocki .w-100na vrtuljku kako biste spriječili zadano poravnanje slike preglednika.

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

S kontrolama

Dodavanje prethodnih i sljedećih kontrola:

Prethodno Sljedeći

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

S indikatorima

Također možete dodati indikatore na vrtuljak, uz kontrole.

Prethodno Sljedeći

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

S natpisima

Lako dodajte opise svojim slajdovima pomoću .carousel-captionelementa unutar bilo kojeg .carousel-item. Oni se mogu lako sakriti na manjim okvirima za prikaz, kao što je prikazano u nastavku, uz dodatne pomoćne programe za prikaz . U početku ih skrivamo pomoću .d-none, a vraćamo ih na uređajima srednje veličine pomoću .d-md-block.

Oznaka prvog slajda

Nulla vitae elit libero, a pharetra augue mollis interdum.

Oznaka drugog slajda

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Oznaka trećeg slajda

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Prethodno Sljedeći

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

Prijelaz

Dodajte .carousel-fadena svoj vrtuljak da biste animirali slajdove s prijelazom koji blijedi umjesto slajda.

Prethodno Sljedeći

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

Korištenje

Preko atributa podataka

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

Atribut data-ride="carousel"se koristi za označavanje vrtuljka kao animiranog koji počinje pri učitavanju stranice. Ne može se koristiti u kombinaciji sa (suvišnom i nepotrebnom) eksplicitnom JavaScript inicijalizacijom istog vrtuljka.

Preko JavaScripta

Pozovite karusel ručno pomoću:

$('.carousel').carousel()

Mogućnosti

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

Metode

.carousel(options)

Inicijalizira vrtuljak s neobaveznim opcijama objecti počinje kružiti kroz stavke.

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

.carousel('cycle')

Kruži kroz stavke vrtuljka slijeva nadesno.

.carousel('pause')

Zaustavlja vrtuljak da kruži kroz stavke.

.carousel(number)

Vrti vrtuljak na određeni okvir (na temelju 0, slično nizu). Vraća se pozivatelju prije nego što je ciljna stavka prikazana (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('prev')

Ciklusi na prethodnu stavku. Vraća se pozivatelju prije nego što se prikaže prethodna stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('next')

Prelazak na sljedeću stavku. Vraća se pozivatelju prije nego što se prikaže sljedeća stavka (tj. prije nego što se slid.bs.carouseldogađaj dogodi).

.carousel('dispose')

Uništava karusel elementa.

Događaji

Bootstrapova klasa vrtuljka izlaže dva događaja za spajanje na funkciju vrtuljka. Oba događaja imaju sljedeća dodatna svojstva:

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

Svi događaji na vrtuljku pokreću se na samom vrtuljku (tj. na <div class="carousel">).

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

Promjena trajanja prijelaza

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