Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check
in English

Carousel

Ib qho slideshow tivthaiv rau kev caij tsheb kauj vab los ntawm cov ntsiab lus-cov duab lossis cov ntawv swb-zoo li lub voj voog.

Ntawm nplooj ntawv no

Nws ua haujlwm li cas

Lub carousel yog slideshow rau cycling los ntawm ib tug series ntawm cov ntsiab lus, ua nrog CSS 3D transforms thiab me ntsis ntawm JavaScript. Nws ua haujlwm nrog cov duab, ntawv nyeem, lossis kev cai cim. Nws kuj suav nrog kev txhawb nqa rau yav dhau los / tom ntej tswj thiab ntsuas.

Hauv cov browsers uas qhov Page Visibility API tau txais kev txhawb nqa, lub carousel yuav zam zawv zawg thaum lub vev xaib tsis pom rau tus neeg siv (xws li thaum browser tab tsis ua haujlwm, qhov browser qhov rai raug txo qis, thiab lwm yam).

Cov nyhuv animation ntawm cov khoom siv no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

Thov nco ntsoov tias cov carousels nested tsis tau txais kev txhawb nqa, thiab carousels feem ntau tsis ua raws li cov qauv kev siv tau.

Piv txwv

Carousels tsis cia li normalize swb qhov ntev. Yog li ntawd, tej zaum koj yuav tau siv cov khoom siv ntxiv lossis cov qauv kev cai kom haum rau cov ntsiab lus loj. Thaum carousels txhawb nqa yav dhau los / tom ntej tswj thiab ntsuas, lawv tsis xav tau meej. Ntxiv thiab kho raws li koj pom haum.

Cov .activechav kawm yuav tsum tau ntxiv rau ib qho ntawm cov swb txwv tsis pub lub carousel yuav tsis pom. Tsis tas li yuav tsum tau teem caij tshwj xeeb idrau kev .carouselxaiv tswj, tshwj xeeb tshaj yog tias koj siv ntau lub carousels ntawm ib nplooj ntawv. Kev tswj thiab ntsuas cov ntsiab lus yuav tsum muaj tus data-bs-targetcwj pwm (lossis hrefrau kev sib txuas) uas phim idlub .carouselntsiab lus.

Slides nkaus xwb

Ntawm no yog ib tug carousel nrog slides xwb. Nco ntsoov lub xub ntiag ntawm .d-blockthiab .w-100ntawm cov duab carousel los tiv thaiv qhov browser default duab sib dhos.

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

Nrog tswj

Ntxiv rau cov kev tswj yav dhau los thiab tom ntej. Peb pom zoo kom siv <button>cov khoom, tab sis koj tuaj yeem siv <a>cov ntsiab lus nrog role="button".

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

Nrog ntsuas

Koj tuaj yeem ntxiv cov ntsuas rau lub carousel, nrog rau cov tswj, ib yam nkaus.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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>

Nrog cov ntawv sau

Ntxiv cov ntawv sau rau koj cov slides yooj yim nrog cov .carousel-captionkhoom hauv ib qho twg .carousel-item. Lawv tuaj yeem muab zais tau yooj yim ntawm cov chaw saib me me, raws li qhia hauv qab no, nrog rau kev xaiv cov khoom siv hluav taws xob . Peb zais lawv thawj zaug nrog .d-nonethiab coj lawv rov qab rau ntawm cov khoom siv nruab nrab nrog .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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

Ntxiv .carousel-faderau koj lub carousel rau animate slides nrog ib tug ploj mus hloov tsis yog ib tug swb. Nyob ntawm koj cov ntsiab lus carousel (xws li, ntawv tsuas yog slides), tej zaum koj yuav xav ntxiv .bg-bodylossis qee qhov kev cai CSS rau .carousel-items kom raug crossfading.

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

Ntxiv data-bs-interval=""rau ib qho .carousel-itemlos hloov lub sijhawm ncua ntawm kev caij tsheb kauj vab mus rau yam khoom tom ntej.

html 
<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 kov swiping

Carousels txhawb swiping sab laug / sab xis ntawm touchscreen li txav ntawm cov swb. Qhov no tuaj yeem cuam tshuam nrog tus data-bs-touchcwj pwm. Cov piv txwv hauv qab no kuj tsis suav nrog tus data-bs-ridecwj pwm yog li nws tsis autoplay.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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>

Tsaus variant

Ntxiv .carousel-darkrau cov .carouselkev tswj tsaus nti, ntsuas, thiab cov ntawv sau. Cov kev tswj hwm tau hloov pauv los ntawm lawv qhov chaw dawb sau nrog filterCSS cov cuab yeej. Cov ntawv sau npe thiab kev tswj hwm muaj qhov sib txawv Sass ntxiv uas hloov kho colorthiab background-color.

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

Kev hloov pauv kev cai

Lub sijhawm hloov pauv ntawm .carousel-itemtuaj yeem hloov pauv nrog $carousel-transition-durationSass hloov pauv ua ntej sau lossis cov qauv kev cai yog tias koj siv CSS suav nrog. Yog tias siv ntau qhov kev hloov pauv, xyuas kom meej tias qhov kev hloov pauv hloov tau txhais ua ntej (xws li transition: transform 2s ease, opacity .5s ease-out).

Sass

Hloov pauv

Kev hloov pauv rau txhua qhov carousels:

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

Variables rau qhov tsaus nti carousel :

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

Kev siv

Los ntawm cov ntaub ntawv attributes

Siv cov ntaub ntawv cwj pwm kom yooj yim tswj txoj hauj lwm ntawm lub carousel. data-bs-slidelees txais cov lus tseem ceeb prevlossis next, uas hloov txoj haujlwm swb txheeb ze rau nws txoj haujlwm tam sim no. Xwb, siv data-bs-slide-tokom dhau qhov ntsuas qhov ntsuas tsis sib haum mus rau lub carousel data-bs-slide-to="2", uas hloov txoj haujlwm swb mus rau qhov ntsuas tshwj xeeb pib nrog 0.

Tus data-bs-ride="carousel"cwj pwm yog siv los khij lub carousel li animating pib ntawm nplooj ntawv load. Yog tias koj tsis siv data-bs-ride="carousel"los pib koj lub carousel, koj yuav tsum pib nws tus kheej. Nws tsis tuaj yeem siv ua ke nrog (rov ua dua thiab tsis tsim nyog) qhia meej JavaScript pib ntawm tib lub carousel.

Ntawm JavaScript

Hu rau carousel manually nrog:

const carousel = new bootstrap.Carousel('#myCarousel')

Kev xaiv

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, tus titlenqi kawg yuav yog 456thiab cov ntaub ntawv sib cais yuav dhau los ntawm cov txiaj ntsig tau muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Lub npe Hom Default Kev piav qhia
interval tus lej 5000 Lub sijhawm ncua sijhawm ntawm kev caij tsheb kauj vab ib yam khoom.
keyboard boolean true Seb lub carousel yuav tsum teb rau cov xwm txheej keyboard.
pause hlua, boolean "hover" Yog tias tau teeb tsa "hover", nres lub caij tsheb kauj vab ntawm lub carousel rau mouseenterthiab rov pib caij tsheb kauj vab ntawm lub carousel rau mouseleave. Yog tias teem rau false, hovering hla lub carousel yuav tsis nres nws. Ntawm cov khoom siv kov, thaum teem rau "hover", kev caij tsheb kauj vab yuav nres rau touchend(thaum tus neeg siv ua tiav kev cuam tshuam nrog lub carousel) rau ob lub sijhawm, ua ntej yuav rov pib dua. Qhov no ntxiv rau tus cwj pwm nas.
ride hlua, boolean false Yog tias teem rau true, autoplays lub carousel tom qab tus neeg siv manually cycles thawj yam khoom. Yog teem rau "carousel", autoplays lub carousel ntawm load.
touch boolean true Seb lub carousel yuav tsum txhawb sab laug / sab xis los so kev sib cuam tshuam ntawm cov khoom siv touchscreen.
wrap boolean true Txawm hais tias lub carousel yuav tsum tsis tu ncua los yog muaj zog nres.

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

Koj tuaj yeem tsim ib qho piv txwv carousel nrog lub carousel constructor, piv txwv li, pib nrog kev xaiv ntxiv thiab pib caij tsheb kauj vab los ntawm cov khoom:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Txoj kev Kev piav qhia
cycle Cycles los ntawm cov khoom carousel ntawm sab laug mus rau sab xis.
dispose Ua kom lub ntsiab ntawm lub carousel. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)
getInstance Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv carousel txuam nrog DOM lub caij, koj tuaj yeem siv nws zoo li no: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Txoj kev zoo li qub uas rov qab qhov piv txwv carousel cuam tshuam rau DOM lub caij lossis tsim ib qho tshiab yog tias nws tsis tau pib. Koj tuaj yeem siv nws li no: bootstrap.Carousel.getOrCreateInstance(element).
next Cycles mus rau yam khoom tom ntej. Rov qab mus rau tus neeg hu ua ntej cov khoom tom ntej tau tshwm sim (xws li, ua ntej qhov slid.bs.carouselxwm txheej tshwm sim).
nextWhenVisible Tsis txhob tig lub voj voog mus rau tom ntej thaum nplooj ntawv tsis pom lossis lub carousel lossis nws niam nws txiv tsis pom. Rov qab mus rau tus hu ua ntej lub hom phiaj khoom tau tshwm sim .
pause Nres lub carousel los ntawm kev caij tsheb kauj vab los ntawm cov khoom.
prev Lub voj voog mus rau qhov khoom dhau los. Rov qab mus rau tus neeg hu ua ntej qhov khoom dhau los tau tshwm sim (xws li, ua ntej qhov slid.bs.carouselxwm txheej tshwm sim).
to Cycles lub carousel rau ib lub thav duab tshwj xeeb (0 raws, zoo ib yam li ib qho array). Rov qab mus rau tus neeg hu ua ntej cov khoom lag luam tau tshwm sim (piv txwv li, ua ntej qhov slid.bs.carouselxwm txheej tshwm sim).

Cov xwm txheej

Bootstrap's carousel class exposes ob txheej xwm rau hooking rau hauv carousel functionality. Ob qho xwm txheej muaj cov khoom nram qab no ntxiv:

  • direction: Cov kev taw qhia uas lub carousel zawv zawg (txawm "left"los yog "right").
  • relatedTarget: Lub caij DOM uas tau swb rau hauv qhov chaw ua cov khoom nquag.
  • from: Qhov Performance index ntawm cov khoom tam sim no
  • to: Qhov Performance index ntawm cov khoom tom ntej

Tag nrho cov xwm txheej carousel raug rho tawm haujlwm ntawm lub carousel nws tus kheej (piv txwv li ntawm <div class="carousel">).

Hom xwm txheej Kev piav qhia
slid.bs.carousel Raug rho tawm haujlwm thaum lub carousel tau ua tiav nws txoj kev hloov pauv.
slide.bs.carousel Hluav taws kub tam sim ntawd thaum txoj kev ua slidepiv txwv raug hu. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})