Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

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.

Na dis pej

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.

Ɛ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 idpan 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-bs-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-bs-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

Ad in di fɔs ɛn di nɛks kɔntrol dɛn. Wi kin advays yu fɔ yuz <button>ɛlimɛnt dɛn, bɔt yu kin yuz <a>ɛlimɛnt dɛn bak wit role="button".

<div id="carouselExampleControls" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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 id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Ad data-bs-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-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Disable fɔ tɔch swip

Karusel dɛn kin sɔpɔt fɔ swip lɛft/rayt na tɔchskrin divays dɛn fɔ muv bitwin di slayd dɛn. Dis kin disable yuz di data-bs-touchatribyut. Di ɛgzampul we de dɔŋ bak nɔ inklud di data-bs-rideatribyut ɛn gɛt data-bs-interval="false"so i nɔ de ɔtoplay.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Dak vayriɔnt

Ad .carousel-darkto di .carouselfɔ kɔntrol dɛn we dak, indikɛtɔ dɛn, ɛn kapshɔn dɛn. Kɔntrol dɛn dɔn invayt frɔm dɛn difɔlt wayt fil wit di filterCSS prɔpati. Kapshɔn ɛn kɔntrol dɛn gɛt ɔda Sass vɛriɔbul dɛn we de kɔstɔmayz di colorɛn background-color.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Kastom transishɔn

Di transishɔn durayshɔn fɔ .carousel-itemkin chenj wit di $carousel-transition-durationSass 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).

Sass we bin de

Di tin dɛn we kin chenj

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Aw fɔ yuz am

Via data atribyut dɛn

Yuz data atribyut fɔ izi fɔ kɔntrol di pozishɔn fɔ di karusel. data-bs-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-bs-slide-tofɔ pas wan raw slayd indeks to di karusel data-bs-slide-to="2", we de chenj di say we di slayd de go to wan patikyula indeks we bigin wit 0.

Di data-bs-ride="carousel"atribyut de yuz fɔ mak wan karusel as animat stat we pej lod. If yu nɔ yuz data-bs-ride="carousel"fɔ initialize yu carousel, yu fɔ initialize am yusɛf. 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:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

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-bs-, lɛk insay data-bs-interval="".

Nem Kayn Balans Tɔk bɔt
interval nɔmba 5000 Di amount of taim fɔ delay bitwin ɔtomɛtik sayklis wan tin. If false, karusel nɔ go ɔtomɛtik saykl.
keyboard boolean we dɛn kɔl true If di karusel fɔ riak to di tin dɛn we de apin na di kibɔd.
pause string fɔ di wan dɛn we de | boolean we dɛn kɔl 'hover'

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.
ride string fɔ di wan dɛn we de | boolean we dɛn kɔl false Awtoplay di karusel afta di pɔsin we de yuz am dɔn saykl di fɔs tin wit in an. If dɛn sɛt am to 'carousel', i de ɔtoplay di karusel we i de lod.
wrap boolean we dɛn kɔl true If di karusel fɔ de saykl kɔntinyu ɔ i fɔ gɛt had stɔp dɛn.
touch boolean we dɛn kɔl true 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ɔ .

Yu kin mek wan karusel instans wit di karusel kɔnstrɔkta, fɔ ɛgzampul, fɔ initialize wit ɔda opshɔn dɛn ɛn bigin fɔ sayklis tru tin dɛn:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
We Tɔk bɔt
cycle Saykl dɛn tru di karusel tin dɛn frɔm lɛft to rayt.
pause Stɔp di karusel fɔ sayklɔs tru tin dɛn.
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 (ɛgz., bifo di slid.bs.carouseltin apin).
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 (ɛgz., bifo di slid.bs.carouseltin apin).
nextWhenVisible Nɔ saykl karusel to nɛks we di pej nɔ de si ɔ di karusel ɔ in mama ɔ papa nɔ de si. Go bak to di pɔsin we kɔl bifo dɛn sho di tin we dɛn want fɔ du
to 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 (ɛgz., bifo di slid.bs.carouseltin apin).
dispose I de pwɛl wan ɛlimɛnt in karusel. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt)
getInstance Statik we de alaw yu fɔ gɛt di karusel instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Statik mɛtɔd we de ritɔn wan karusel instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we dɛn nɔ bin initializ am. Yu kin yuz am lɛk dis:bootstrap.Carousel.getOrCreateInstance(element)

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
slide.bs.carousel Faya wantɛm wantɛm we dɛn kɔl di slideinstans mɛtɔd.
slid.bs.carousel Faya we di karusel dɔn dɔn in slayd chenj. 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})