Source

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

Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

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

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

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

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.

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

Ad data-interval=""to a .carousel-itemfɔ chenj di tɛm we yu fɔ delay bitwin ɔtomɛtik sayklis to di nɛks tin.

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

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.
tɔch boolean we dɛn kɔl tru If di karusel fɔ sɔpɔt lɛft/rayt swip intarakshɔn dɛn na tɔchskrin divays 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 slideinstans 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 aplay 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).