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.

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.

Slayd dɛn nɔmɔ

Na wan karusel wit slayd nɔmɔ. Notis di prɛzɛns fɔ di .d-blockɛn .img-fluidpan 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Wit kɔntrol dɛn

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

Bifo Nɛks

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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.

Bifo Nɛks

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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.

Bifo Nɛks

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

Di we aw dɛn de du am

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

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