Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Karrusel nga

Maysa a paset ti slideshow para iti panagbisikleta kadagiti elemento—dagiti ladawan wenno slide ti teksto—kas iti carousel.

Iti daytoy a panid

No kasano ti panagandar dayta

Ti karusel ket maysa a slideshow para iti panagbisikleta babaen ti serye ti linaon, a naibangon babaen dagiti panagbalbaliw ti CSS 3D ken sangkabassit a JavaScript. Agtrabaho dayta iti agsasaruno a ladawan, teksto, wenno custom markup. Daytoy ket mangiraman pay ti suporta para kadagiti napalabas/sumaruno a kontrol ken dagiti mangipakita.

Kadagiti browser a sadiay ti Page Visibility API ket nasuportaran, ti carousel ket mangliklik iti panag-slide no ti panid ti web ket saan a makita ti agar-aramat (kas no ti tab ti browser ket saan nga aktibo, ti tawa ti browser ket napabassit, kdpy.).

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Pangngaasi nga ammom a dagiti naisanglad a karusel ket saan a nasuportaran, ken dagiti karusel ket sapasap a saan a maitunos kadagiti pagalagadan ti pannakagun-od.

Pagwadan

Saan nga automatiko a normalize dagiti carousel dagiti dimension ti slide. Kas kasta, mabalin a kasapulam ti agusar kadagiti kanayonan a utilidad wenno dagiti kostumbre nga estilo tapno maitutop ti kadakkel ti linaon. Bayat a dagiti carousel ket mangsuporta kadagiti napalabas/sumaruno a kontrol ken dagiti mangipakita, dagitoy ket saan a nalawag a kasapulan. Inayon ken i-customize-mo kas makitam a maitutop.

Masapul .activea mainayon ti klase iti maysa kadagiti slide no saan ket saan a makita ti carousel. Siguraduen pay nga ikeddeng ti naisangsangayan iditi .carouselpara kadagiti opsional a kontrol, nangruna no agus-usar ka ti adu a carousel iti maymaysa a panid. Dagiti elemento ti kontrol ken mangipakita ket masapul nga addaan iti data-bs-targetattribute (wenno hrefpara kadagiti silpo) a maipada iti idti .carouselelemento.

Slides laeng

Adda ditoy ti carousel nga addaan laeng kadagiti slide. Paliiwenyo ti kaadda ti .d-blockken .w-100kadagiti ladawan ti carousel tapno malapdan ti panagtunos ti default a ladawan ti browser.

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

Adda dagiti kontrol

Panagnayon iti napalabas ken sumaganad a kontrol. Irekomendarmi ti panagusar kadagiti <button>elemento, ngem mabalinmo pay nga usaren <a>dagiti elemento nga addaan iti role="button".

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

Adda dagiti mangipakita

Mabalinmo pay nga inayon dagiti mangipakita iti carousel, a kadua dagiti kontrol, met.

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

Adda kapsionna

Manginayon kadagiti kapsion kadagiti slide-mo a nalaka babaen ti .carousel-captionelemento iti uneg ti ania man .carousel-item. Dagitoy ket mabalin a nalaka a mailemmeng kadagiti babbabassit a viewport, a kas naipakita iti baba, nga addaan kadagiti opsional a utilidad ti panagiparang . Ilemmengmi ida idi damo babaen .d-noneken isublimi ida kadagiti kalalainganna ti kadakkelda nga alikamen babaen ti .d-md-block.

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

Inayon .carousel-fadeiti carousel-mo tapno ma-animate dagiti slide nga addaan iti fade transition imbes a slide. Depende iti linaon ti carouselmo (kas pagarigan, dagiti slide laeng ti teksto), mabalinmo a kayat ti manginayon .bg-bodywenno sumagmamano a kostumbre a CSS iti .carousel-items para iti umno a crossfading.

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

Inayon data-bs-interval=""iti a .carousel-itemtapno baliwan ti kaadu ti panawen a maitantan iti nagbaetan ti automatiko a panagbisikleta iti sumaganad a banag.

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

Isardeng ti touch swiping

Suportaran dagiti carousel ti panag-swipe iti kannigid/kannawan kadagiti touchscreen device tapno aggaraw iti nagbaetan dagiti slide. Daytoy ket mabalin a mapasardeng babaen ti panagusar ti data-bs-touchattribute. Ti pagarigan iti baba ket saan met a mangiraman ti data-bs-rideattribute isu a saan nga autoplay.

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

Nasipnget nga variant

Inayon .carousel-darkiti .carouselpara kadagiti nasipnget a kontrol, mangipakita, ken kapsion. Dagiti kontrol ket nabaliktad manipud iti default a puraw a punnoda babaen ti filtertagikua ti CSS. Dagiti kapsion ken dagiti kontrol ket addaan kadagiti kanayonan a Sass a variable a mangpasayaat ti colorken background-color.

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

Kostumbre a panagbalbaliw

Ti kapaut ti panagbalbaliw ti .carousel-itemmabalin a mabaliwan babaen ti $carousel-transition-durationvariable ti Sass sakbay ti panagtipon wenno dagiti kostumbre nga estilo no agus-usar ka ti naurnong a CSS. No dagiti adu a panagbalbaliw ket maipakat, siguraduen a ti panagbalbaliw ti panagbalbaliw ket naikeddeng nga umuna (kas pagarigan transition: transform 2s ease, opacity .5s ease-out).

Sass nga

Dagiti Variable

Dagiti variable para kadagiti amin a karusel:

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

Dagiti variable para iti nasipnget a karusel : .

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

Panagusar

Babaen kadagiti attribute ti datos

Usaren dagiti data attribute tapno nalaka a makontrol ti posision ti carousel. data-bs-slideawaten dagiti nasken a balikas prevwenno next, a mangbalbaliw ti posision ti slide a relatibo iti agdama a posisionna. Saan laeng a dayta, usaren data-bs-slide-toa mangipasa iti raw slide index iti carousel data-bs-slide-to="2", a mangibalbaliw iti posision ti slide iti partikular nga indeks a mangrugi iti 0.

Ti data-bs-ride="carousel"attribute ket naus-usar a mangmarka ti maysa a carousel a kas animating a mangrugi iti panagkarga ti panid. No dika usaren data-bs-ride="carousel"a mangirugi iti carousel-mo, masapul nga irugimo a mismo dayta. Daytoy ket saan a mabalin nga usaren a maikuyog ti (redundante ken saan a kasapulan) a nalawag a panangrugi ti JavaScript ti isu met laeng a karusel.

Babaen ti JavaScript

Awagan ti carousel a manual babaen ti:

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

Dagiti Pagpilian

Kas dagiti pagpilian ket mabalin a maipasa babaen dagiti kababalin ti datos wenno JavaScript, mabalinmo nga inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="{value}". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti “ camelCase ” iti “ kebab-case ” no ipasa dagiti pagpilian babaen kadagiti kababalin ti datos. Kas pagarigan, usaren data-bs-custom-class="beautifier"imbes a data-bs-customClass="beautifier".

Manipud iti Bootstrap 5.2.0, amin a paset ket mangsuporta ti eksperimental a naireserba a kababalin ti datos data-bs-configa mabalin a mangbalay ti simple a panagisaad ti paset a kas ti kuerdas ti JSON. No ti maysa nga elemento ket addaan kadagiti data-bs-config='{"delay":0, "title":123}'ken data-bs-title="456"dagiti kababalin, ti maudi a titlepateg ket agbalinto 456ken dagiti naisina a kababalin ti datos ket mangbalbaliw kadagiti pateg a naited iti data-bs-config. Iti pay maipatinayon, dagiti addan a kababalin ti datos ket makabaelda a mangbalay kadagiti pateg ti JSON a kas ti data-bs-delay='{"show":0,"hide":150}'.

Nagan Tipo Default Panangiladawan
interval bilang 5000 Ti kaadu ti panawen a maitantan iti nagbaetan ti automatiko a panagbisikleta iti maysa a banag.
keyboard boolean nga true No rumbeng nga agtignay ti carousel kadagiti pasamak iti keyboard.
pause kuerdas, boolean nga "hover" No naikabil iti "hover", isardengna ti panagbisikleta ti carousel mouseenterken ituloyna manen ti panagbisikleta ti carousel iti mouseleave. No naikabil iti false, ti panangi-hover iti rabaw ti carousel dina pasardengen dayta. Kadagiti alikamen a makasagid, no naikabil iti "hover", agsardengto ti panagbisikleta touchend(apaman a malpas ti agus-usar ti makilangen iti carousel) iti dua nga aggigiddan, sakbay nga automatiko nga agsubli. Daytoy ket mainayon iti kababalin ti ipus.
ride kuerdas, boolean nga false No naikeddeng iti true, autoplayna ti carousel kalpasan a manual a siklo ti agar-aramat ti umuna a banag. No naikabil iti "carousel", autoplayna ti carousel iti karga.
touch boolean nga true No ti carousel ket rumbeng a mangsuporta kadagiti kannigid/kannawan a swipe interaction kadagiti touchscreen device.
wrap boolean nga true No ti carousel ket rumbeng nga agtultuloy nga agbisikleta wenno addaan kadagiti natangken a pagsardengan.

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

Mabalinmo ti mangpartuat ti maysa a pagarigan ti karusel babaen ti konstruktor ti karusel, kas pagarigan, tapno mangirugi babaen dagiti kanayonan a pagpilian ken mangrugi ti panagbisikleta babaen dagiti banag:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Wagas Panangiladawan
cycle Agsiklo kadagiti carousel items manipud kannigid agingga iti kannawan.
dispose Dadaelenna ti carousel ti maysa nga elemento. (Ikkaten ti naidulin a datos iti elemento ti DOM)
getInstance Estatiko a pamay-an a mangipalubos kenka a makaala ti pagarigan ti karusel a nainaig iti maysa nga elemento ti DOM, mabalinmo nga usaren daytoy a kas daytoy: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Estatiko a pamay-an a mangisubli ti maysa a pagarigan ti karusel a nainaig iti maysa nga elemento ti DOM wenno mangpartuat ti baro no kas pagarigan saan a nairugi. Mabalinmo nga usaren dayta a kastoy: bootstrap.Carousel.getOrCreateInstance(element).
next Agsiklo iti sumaganad a banag. Agsubli iti tumawag sakbay a naipakita ti sumaganad a banag (kas pagarigan, sakbay a slid.bs.carouselmapasamak ti pasamak).
nextWhenVisible Dika agbisikleta iti carousel iti sumaruno no saan a makita ti panid wenno saan a makita ti carousel wenno ti nagannakna. Agsubli iti tumawag sakbay a naipakita ti puntiria a banag .
pause Pasardengenna ti carousel nga agbisikleta kadagiti banag.
prev Agsiklo iti napalabas a banag. Agsubli iti tumawag sakbay a naipakita ti napalabas a banag (kas pagarigan, sakbay a slid.bs.carouselmapasamak ti pasamak).
to Isiklo ti carousel iti partikular a kuadro (0 a naibatay, kapada ti maysa nga array). Agsubli iti tumawag sakbay a naipakita ti puntiria a banag (kas pagarigan, sakbay a slid.bs.carouselmapasamak ti pasamak).

Dagiti Pasamak

Ti klase ti carousel ti Bootstrap ket mangibutaktak ti dua a pasamak para iti panag-hook iti panagusar ti carousel. Agpada a dagiti pasamak ket addaan kadagiti sumaganad a kanayonan a tagikua:

  • direction: Ti direksion a pag-slide ti carousel (bareng "left"wenno "right").
  • relatedTarget: Ti elemento ti DOM a mai-slid iti lugarna a kas ti aktibo a banag.
  • from: Ti indeks ti agdama a banag
  • to: Ti indeks ti sumaganad a banag

Amin a pasamak ti carousel ket maipaputok iti carousel a mismo (kayatna a sawen iti <div class="carousel">).

Kita ti pasamak Panangiladawan
slid.bs.carousel Napaputok no nalpas ti carousel ti slide transition-na.
slide.bs.carousel Dagus nga agputok no ti slidepamay-an ti instansia ket naawagan. 
const myCarousel = document.getElementById('myCarousel')

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