Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

Carousel a wɔde yɛ nneɛma

Slideshow afã bi a wɔde sakre fa element ahorow mu—mfonini anaa nsɛm a wɔakyerɛw ho mfonini—te sɛ carousel.

Wɔ kratafa yi so

Sɛnea ɛyɛ adwuma

Carousel no yɛ slideshow a wɔde sakre tu fa nsɛm a ɛtoatoa so mu, a wɔde CSS 3D nsakrae ne JavaScript kakra na esii. Ɛde mfonini ahorow, nsɛm, anaa agyiraehyɛde a wɔahyɛ da ayɛ na ɛyɛ adwuma. Ɛsan nso ka mmoa a wɔde ma wɔ kan/a edi hɔ a wɔde di dwuma ne nsɛnkyerɛnnede ahorow ho.

Wɔ browser ahorow a wɔboa Page Visibility API no mu no, carousel no bɛkwati sɛ ɛbɛtwetwe bere a wɛbsaet krataafa no ntumi nhu nea ɔde di dwuma no (te sɛ bere a browser tab no nyɛ adwuma, browser window no ayɛ ketewaa, ne nea ɛkeka ho).

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Yɛsrɛ wo hu sɛ wɔmfa nested carousels mmoa, na mpɛn pii no carousels nhyia gyinapɛn ahorow a ɛfa akwan a wɔfa so nya nneɛma ho.

Nhwɛsoɔ

Carousels ntumi nyɛ slide nsusuwii ahorow no sɛnea ɛte ankasa. Sɛnea ɛte no, ebia ɛho behia sɛ wode nneɛma foforo a wɔde di dwuma anaa akwan horow a wɔahyɛ da ayɛ di dwuma na ama woatumi ayɛ nneɛma no kɛse sɛnea ɛfata. Bere a carousels boa controls ne indicators a atwam/a edi hɔ no, ɛnyɛ nea wɔhwehwɛ pefee. Fa ka ho na yɛ nea wopɛ sɛnea wuhu sɛ ɛfata.

Ɛsɛ .activesɛ wɔde adesuakuw no ka slide ahorow no biako ho anyɛ saa a carousel no renhu. Afei nso hwɛ hu sɛ wode soronko bi idbesi hɔ .carouselama controls a wopɛ, titiriw sɛ wode carousels pii redi dwuma wɔ kratafa biako so a. Ɛsɛ sɛ control ne indicator elements no nya data-bs-targetattribute (anaasɛ hrefma links) a ɛne idof the .carouselelement no hyia.

Slides nkutoo na ɛwɔ hɔ

Carousel a ɛwɔ slides nkutoo ni. Hyɛ .d-blockne .w-100wɔ carousel mfonini ahorow so no nsow na amma browser default mfonini ahorow no anhyehyɛ no.

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

Ne nneɛma a wɔde di dwuma

Fa ka ho wɔ controls a atwam ne nea edi hɔ no mu. Yɛhyɛ nyansa sɛ fa <button>elements di dwuma, nanso wubetumi nso de <a>elements a ɛwɔ 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>

Ne nsɛnkyerɛnnede ahorow

Wubetumi nso de nsɛnkyerɛnne no aka carousel no ho, aka controls no ho, nso.

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

Ne nsɛm a wɔakyerɛw wɔ so

Fa nsɛm a wɔakyerɛw no ka wo slide ahorow no ho mmerɛw denam .carousel-captionelement a ɛwɔ biara mu .carousel-itemno so . Wobetumi de asie ntɛm wɔ viewports nketewa so, sɛnea wɔakyerɛ wɔ ase ha no, a optional display utilities . Yɛde sie mfiase no .d-nonena yɛde san ba wɔ mfiri akɛse a ɛwɔ mfinimfini so de .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>

Crossfade a ɛyɛ fɛ

Fa ka .carousel-fadewo carousel ho na ama slide ahorow no ayɛ anigye denam fade nsakrae so sen sɛ wode slide bedi dwuma.

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

Fa ka data-bs-interval=""a ho .carousel-itemna sesa bere dodow a wode bɛkyɛ wɔ sakre a wobɛfa so ara akɔ ade a edi hɔ no ntam.

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

Ma touch swiping no nyɛ adwuma

Carousels boa swiping benkum/nifa wɔ touchscreen mfiri ahorow so ma ɛkɔ slide ahorow ntam. Wobetumi de data-bs-touchattribute no asiw eyi ano. Nhwɛsoɔ a ɛwɔ aseɛ ha no nso nka data-bs-rideattribute no ho na ɛwɔ data-bs-interval="false"enti ɛnyɛ autoplay.

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

Esum mu nsakrae

Fa ka .carousel-darkho .carouselma controls, indicators, ne captions a ɛyɛ sum. Wɔadan controls no afi wɔn default white fill a filterCSS agyapade no wom no mu. Captions ne controls wɔ Sass variables foforo a ɛsesa colorne 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>

Amanneɛ kwan so nsakrae

Nsakrae bere tenten a .carousel-itemwobetumi asesa ne $carousel-transition-durationSass variable ansa na woaboaboa ano anaasɛ custom styles sɛ wode CSS a wɔaboaboa ano no redi dwuma a. Sɛ wɔde nsakraeɛ dodoɔ bi di dwuma a, hwɛ sɛ wɔadi kan akyerɛkyerɛ nsakraeɛ nsakraeɛ no mu (sɛ nhwɛsoɔ no transition: transform 2s ease, opacity .5s ease-out).

Sass

Nneɛma a Ɛsakra

$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);

Sɛnea wɔde di dwuma

Via data su ahorow so

Fa data attributes di dwuma na ama ɛnyɛ den sɛ wobɛhwɛ carousel no gyinabea so. data-bs-slidegye nsɛmfua titiriw prevanaa next, a ɛsakra slide gyinabea no toto ne mprempren gyinabea no ho. Sɛnea ɛbɛyɛ foforo no, fa di dwuma data-bs-slide-tode fa raw slide index kɔ carousel no so data-bs-slide-to="2", a ɛdannan slide no gyinabea kɔ index pɔtee bi a efi ase wɔ 0.

Wɔde data-bs-ride="carousel"su no di dwuma de hyɛ carousel agyirae sɛ ɛyɛ animating a efi ase wɔ kratafa a wɔde hyɛ mu. Sɛ woamfa anhyɛ data-bs-ride="carousel"wo carousel no ase a, ɛsɛ sɛ w’ankasa wohyɛ ase. Wontumi mfa nni dwuma nka (redundant ne nea ɛho nhia) pefee JavaScript mfiase a ɛwɔ carousel koro no ara ho.

Ɛdenam JavaScript so

Frɛ carousel denam nsa so de:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-, sɛnea ɛwɔ data-bs-interval="".

Din Korɔ Mfiaseɛ Nkyerɛmu
interval nɔma 5000 Bere dodow a ɛsɛ sɛ wɔtwentwɛn so wɔ ade bi a wɔde sakre tu kwan ankasa ntam. Sɛ false, carousel rentumi nkɔ kyinhyia ankasa.
keyboard boolean ho asɛm true Sɛ ebia ɛsɛ sɛ carousel no yɛ n’ade wɔ nsɛm a esisi wɔ keyboard so no ho anaa.
pause ahama | boolean ho asɛm 'hover'

Sɛ wode si 'hover', a, egyina carousel no sakre a ɛretu no so mouseenterna ɛsan fi ase de sakre a ɛretu wɔ carousel no so no mouseleave. Sɛ wode si false, a, sɛ wode wo ho to carousel no so a, ɛrennyae.

Wɔ mfiri a wɔde nsa ka so no so no, sɛ wode si 'hover', sakre so a, ɛbɛgyina touchend(bere a nea ɔde di dwuma no ne carousel no adi nkitaho wie no) ntam abien, ansa na wasan afi ase ankasa. Hyɛ no nsow sɛ eyi ka atifi hɔ mouse suban no ho.
ride ahama | boolean ho asɛm false Autoplays carousel no bere a nea ɔde di dwuma no de ne nsa abɔ ade a edi kan no akyi. Sɛ wode si 'carousel', autoplays carousel no wɔ load so.
wrap boolean ho asɛm true Sɛ́ ebia ɛsɛ sɛ carousel no di sakre bere nyinaa anaasɛ ɛwɔ gyinabea a ɛyɛ den.
touch boolean ho asɛm true Sɛ ebia ɛsɛ sɛ carousel no boa benkum/nifa swipe nkitahodi wɔ touchscreen mfiri ahorow so anaa.

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no ​​no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

Wubetumi de carousel constructor no ayɛ carousel nhwɛso, sɛ nhwɛso no, de ahyɛ ase de akwan foforo a wobɛpaw na woafi ase akɔ sakre so afa nneɛma mu:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Ɔkwan Nkyerɛmu
cycle Kyinkyin fa carousel nneɛma no mu fi benkum kɔ nifa.
pause Siw carousel no kwan sɛ ɛnsɛ sɛ ɔde sakre fa nneɛma mu.
prev Kyinkyin kɔ ade a atwam no so. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a atwam no (sɛ nhwɛso no, ansa na slid.bs.carouselasɛm no asi).
next Kyinkyin kɔ ade a edi hɔ no so. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a edi hɔ no (sɛ nhwɛso no, ansa na slid.bs.carouselasɛm no asi).
nextWhenVisible Mfa cycle carousel nkɔ next bere a krataafa no ntumi nhu anaasɛ carousel no anaa n’awofo no ntumi nhu no. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a wɔde asi wɔn ani so no
to Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, te sɛ array). San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a wɔde asi wɔn ani so no (sɛ nhwɛso no, ansa na slid.bs.carouselasɛm no asi).
dispose Ɔsɛe element bi carousel. (Eyi data a wɔde asie wɔ DOM element no so)
getInstance Static kwan a ɛma wo kwan ma wo nya carousel instance a ɛbata DOM element bi ho no, wubetumi de adi dwuma sɛnea eyi te:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Static kwan a ɛsan de carousel nhwɛso a ɛbata DOM element ho anaasɛ ɛbɔ foforo sɛ ɛba sɛ wɔanhyɛ ase a. Wubetumi de adi dwuma sɛnea ɛte yi:bootstrap.Carousel.getOrCreateInstance(element)

Nsɛm a esisi

Bootstrap carousel adesuakuw no da nsɛm abien a esisi ma hooking kɔ carousel dwumadi mu adi. Nsɛm abien no nyinaa wɔ nneɛma foforo a edidi so yi:

  • direction: Ɔkwan a carousel no retwe ( "left"anaasɛ "right").
  • relatedTarget: DOM element a wɔretwetwe akɔ ne gyinabea sɛ ade a ɛyɛ adwuma.
  • from: Ade a ɛwɔ hɔ mprempren no ho index
  • to: Ade a edi hɔ no ho index

Wɔtow carousel nsɛm a esisi nyinaa tow gu carousel no ankasa so (kyerɛ sɛ, wɔ <div class="carousel">).

Adeyɛ no su Nkyerɛmu
slide.bs.carousel Fires ntɛm ara bere a slidewɔafrɛ instance kwan no.
slid.bs.carousel Wɔtow tuo bere a carousel no awie ne slide nsakrae no. 
var myCarousel = document.getElementById('myCarousel')

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