Karusel we dɛn kin yuz fɔ mek

Wan slayd sho kɔmpɔnɛnt fɔ sayklɔs tru ɛlimɛnt dɛn—imej ɔ slayd dɛn we gɛt tɛks—lɛk karusel.

Aw i de wok

Di karusel na wan slayd sho fɔ sayklis tru wan siriɔs kɔntinyu, we dɛn bil wit CSS 3D transfɔm ɛn smɔl JavaSkript. I de wok wit wan siriɔs pikchɔ, tɛks, ɔ kɔstɔm mak. I inklud bak sɔpɔt fɔ di fɔs/nɛks kɔntrol ɛn indikɛtɔ dɛn.

Insay di brawza dɛn usay dɛn sɔpɔt di Pej Visibiliti API , di karusel go avɔyd fɔ slayv we di wɛb pej nɔ de si di pɔsin we de yuz am (lɛk we di brɔwza tab nɔ de wok, di brawza winda nɔ bɔku, ɛn ɔda tin dɛn).

Duya mɛmba se dɛn nɔ de sɔpɔt nest karusel dɛn, ɛn karusel dɛn jɔs nɔ de fala di standad dɛn fɔ akses.

Las wan, if yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js .

Ɛgzampul

Karusel nɔ de ɔtomɛtik nɔmal di dimɛnshɔn dɛn fɔ di slayd dɛn. As a so, yu kin nid fɔ yuz ɔda yutiliti ɔ kɔstɔm stayl dɛn fɔ mek yu gɛt di rayt sayz fɔ di tin dɛn we de insay. Wail karusel dεm de sכpכt di fכs/nεks kכntrכl dεm εn indikεtכ dεm, dεn nכ de kכl dεm klia wan. Ad ɛn kɔstɔmayz am as yu si se i fayn.

Di .activeklas nid fɔ ad to wan pan di slayd dɛn ɔdasay di karusel nɔ go de fɔ si. Dɔn bak mek shɔ se yu sɛt wan yunik id na di .carouselfɔ opshɔnal kɔntrol dɛn, mɔ if yu de yuz bɔku karusel dɛn na wan pej. Kɔntrol ɛn indikɛtɔ ɛlimɛnt dɛn fɔ gɛt data-targetatribyut (ɔ hreffɔ link dɛn) we de mach di id fɔ di .carouselɛlimɛnt.

Slayd dɛn nɔmɔ

Na wan karusel wit slayd nɔmɔ. Notis di prɛzɛns fɔ di .d-blockɛn .w-100pan karusel pikchɔ dɛn fɔ mek di brɔwza nɔ alaynɛt difɔlt imej dɛn.

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

Wit kɔntrol dɛn

Add in di fɔs ɛn nɛks kɔntrol dɛn:

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

Wit indikɛtɔ dɛn

Yu kin ad di indikɛtɔ dɛn bak to di karusel, nia di kɔntrol dɛn, bak.

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

Wit di kapshɔn dɛn

Ad kapshɔn dɛn to yu slayd dɛn izi wan wit di .carousel-captionɛlimɛnt insay ɛni .carousel-item. Dɛn kin ayd dɛn izi wan na smɔl smɔl say dɛn fɔ si, lɛk aw dɛn sho dɔŋ ya, wit opshɔnal displei yutiliti dɛn . Wi kin ayd dɛn fɔs wit .d-noneɛn briŋ dɛn bak pan midul-sayz divays dɛn wit .d-md-block.

Fɔs slayd lɛbl

Nulla vitae elit libero, we na wan pharetra augue mollis intadɔm.

Sɛkɔn slayd lɛbl

Lorem ipsum dolor sidon amet, konsektetur adipissing elit.

Tɔd slayd lɛbl

Praesent commodo cursus magna, vel scelerisk nisl kɔnsɛkt.

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

Krɔs-fayd

Ad .carousel-fadeto yu karusel fɔ animate slayd dɛn wit wan fade transishɔn instead ɔf wan slayd.

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

Aw fɔ yuz am

Via data atribyut dɛn

Yuz data atribyut fɔ izi fɔ kɔntrol di pozishɔn fɔ di karusel. data-slideaksept di ki wɔd dɛn prevɔ next, we de chenj di say we di slayd de we yu kɔmpia am to di say we i de naw. Ɔda we de fɔ yuz data-slide-tofɔ pas wan raw slayd indeks to di karusel data-slide-to="2", we de chenj di say we di slayd de go to wan patikyula indeks we bigin wit 0.

Di data-ride="carousel"atribyut de yuz fɔ mak wan karusel as animat stat we pej lod. I nɔ go ebul fɔ yuz am togɛda wit (ridandant ɛn nɔ nid) ɛksplisit JavaSkript initializeshɔn fɔ di sem karusel.

Yu kin yuz JavaSkript fɔ yuz am

Kɔl karusel wit yu an wit:

$('.carousel').carousel()

Di tin dɛn we yu kin pik fɔ du

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-, lɛk insay data-interval="".

Nem	Kayn	Balans	Tɔk bɔt
intaval	nɔmba	5000 pipul dɛn	Di amount of taim fɔ delay bitwin ɔtomɛtik sayklis wan tin. If na lay, karusel nɔ go ɔtomɛtik saykl.
kibɔd fɔ di kibɔd	boolean we dɛn kɔl	tru	If di karusel fɔ riak to di tin dɛn we de apin na di kibɔd.
wet smɔl	string fɔ di wan dɛn we de \| boolean we dɛn kɔl	"hova" fɔ de.	If dɛn sɛt am to `"hover"`, i de stɔp di sayklis fɔ di karusel `mouseenter`ɛn bigin bak di sayklis fɔ di karusel pan `mouseleave`. If yu sɛt am to `false`, fɔ hov oba di karusel nɔ go stɔp am. Na divays dɛn we gɛt tɔch-ɛnibɛl, we dɛn sɛt am to `"hover"`, sayklis go stɔp pan `touchend`(wans di pɔsin we de yuz am dɔn fɔ intarakt wit di karusel) fɔ tu intaval dɛn, bifo i bigin bak ɔtomɛtik wan. Notis se dis na apat frɔm di we aw di maws de biev we wi dɔn tɔk bɔt.
rayd	rop	lay	Awtoplay di karusel afta di pɔsin we de yuz am dɔn saykl di fɔs tin wit in an. If "carousel", otoplay di karusel pan lod.
rap	boolean we dɛn kɔl	tru	If di karusel fɔ de saykl kɔntinyu ɔ i fɔ gɛt had stɔp dɛn.

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ.

`.carousel(options)`

Initializes di carousel wit wan opshonal opshon objecten stat saikl tru tin dem.

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

`.carousel('cycle')`

Saykl dɛn tru di karusel tin dɛn frɔm lɛft to rayt.

`.carousel('pause')`

Stɔp di karusel fɔ sayklɔs tru tin dɛn.

`.carousel(number)`

Saykl di karusel to wan patikyula freym (0 bays, we fiba wan arenjmɛnt). Ritɔn to di pɔsin we kɔl bifo dɛn sho di tin we dɛn want fɔ du (dat na bifo di slid.bs.carouseltin apin).

`.carousel('prev')`

Saykl dɛn to di tin we bin dɔn de bifo. Ritɔn to di pɔsin we kɔl bifo dɛn sho di tin we bin de bifo (dat na bifo di slid.bs.carouseltin apin).

`.carousel('next')`

Saykl dɛn to di nɛks tin. Ritɔn to di pɔsin we kɔl bifo dɛn sho di nɛks tin (dat na bifo di slid.bs.carouseltin apin).

`.carousel('dispose')`

I de pwɛl wan ɛlimɛnt in karusel.

Di tin dɛn we kin apin

Bootstrap in karusel klas de ɛksplɔz tu ivintɛns fɔ huk insay karusel funkshɔnaliti. Dɛn tu ivin dɛn ya gɛt dɛn ɔda prɔpati dɛn ya:

direction: Di dairekshɔn we di karusel de slayv (ɛither "left"ɔ "right").
relatedTarget: Di DOM elemɛnt we dɛn de slid insay ples as di aktiv aytem.
from: Di indeks fɔ di tin we de naw
to: Di indeks fɔ di nɛks tin

Ɔl di karusel ivin dɛn de faya na di karusel sɛf (dat na na di <div class="carousel">).

Di kayn tin we apin	Tɔk bɔt
slayd.bs.karosel	Dis ivent de faya wantɛm wantɛm we dɛn kɔl di `slide`instans mɛtɔd.
slid.bs.karosel we de na di slid	Dis ivent de faya we di karusel dɔn dɔn in slayd transishɔn.

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

Chenj di tɛm we di chenj de tek

Di transishɔn durayshɔn fɔ .carousel-itemkin chenj wit di $carousel-transitionSass vɛriɔbul bifo yu kɔmpilayt ɔ kɔstɔm stayl dɛn if yu de yuz di kɔmpilayt CSS. If dɛn yuz bɔku transishɔn dɛn, mek shɔ se dɛn difayn di transfɔm transishɔn fɔs (ɛgz. transition: transform 2s ease, opacity .5s ease-out).