Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
in English

Carousel

Yon eleman diaporama pou monte bisiklèt nan eleman-imaj oswa glisad nan tèks-tankou yon Carousel.

Nan paj sa a

Ki jan li fonksyone

Carousel la se yon diaporama pou monte bisiklèt atravè yon seri kontni, bati ak CSS 3D transfòme ak yon ti jan nan JavaScript. Li travay ak yon seri de imaj, tèks, oswa maketing koutim. Li gen ladan tou sipò pou kontwòl anvan / pwochen ak endikatè.

Nan navigatè kote API Vizibilite Paj la sipòte, Carousel la ap evite glise lè paj wèb la pa vizib pou itilizatè a (tankou lè tab navigatè a inaktif, fenèt navigatè a minimize, elatriye).

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Tanpri sonje ke karousèl anbrike yo pa sipòte, e karousèl yo jeneralman pa konfòme ak estanda aksè.

Egzanp

Carousels pa otomatikman nòmalize dimansyon glise yo. Kòm sa yo, ou ka bezwen sèvi ak sèvis piblik adisyonèl oswa estil koutim pou yon fason apwopriye gwosè kontni. Pandan ke karousèl sipòte kontwòl ak endikatè anvan/pwochen, yo pa klèman obligatwa. Ajoute ak personnaliser jan ou wè anfòm.

Yo .activedwe ajoute klas la nan youn nan glisad yo sinon karousèl la p ap vizib. Epitou asire w ke ou mete yon inik idsou la .carouselpou kontwòl opsyonèl, espesyalman si w ap itilize karousèl miltip sou yon sèl paj. Eleman kontwòl ak endikatè yo dwe gen yon data-bs-targetatribi (oswa hrefpou lyen) ki matche ak ideleman .carouselan.

Slides sèlman

Isit la nan yon Carousel ak glisad sèlman. Remake prezans nan .d-blockak .w-100sou imaj Carousel pou anpeche aliyman imaj default navigatè a.

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>

Avèk kontwòl

Ajoute nan kontwòl anvan ak pwochen. Nou rekòmande pou itilize <button>eleman, men ou ka itilize <a>eleman tou ak 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>

Avèk endikatè

Ou kapab tou ajoute endikatè yo nan Carousel la, ansanm ak kontwòl yo tou.

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>

Avèk tit

Ajoute ti tit nan diapositives ou yo fasil ak .carousel-captioneleman ki nan nenpòt ki .carousel-item. Yo ka kache fasilman sou vi ki pi piti yo, jan yo montre anba a, ak sèvis piblik opsyonèl . Nou kache yo okòmansman ak .d-nonepote yo tounen sou aparèy gwosè mwayen ak .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

Ajoute .carousel-fadenan Carousel ou a pou anime glisad ak yon tranzisyon fennen olye de yon glisad. Tou depan de kontni Carousel ou a (egzanp, tèks sèlman glisad), ou ka vle ajoute .bg-bodyoswa kèk CSS koutim nan .carousel-items yo pou bon jan kwaze.

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>

Ajoute data-bs-interval=""nan yon .carousel-itempou chanje kantite tan pou pran reta ant otomatikman monte bisiklèt nan pwochen atik la.

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>

Enfim glise manyen

Carousels sipòte glise agoch/dwat sou aparèy tactile pou deplase ant glisad. Sa a ka enfim lè l sèvi avèk data-bs-touchatribi a. Egzanp ki anba a tou pa gen ladan data-bs-rideatribi a pou li pa jwe otomatikman.

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>

Variant nwa

Add .carousel-darkto the .carouselpou pi fonse kontwòl, endikatè, ak tit. Kontwòl yo te ranvèse soti nan ranpli blan default yo ak filterpwopriyete CSS la. Tit ak kontwòl yo gen lòt varyab Sass ki personnaliser colorak 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>

Tranzisyon koutim

Dire tranzisyon an .carousel-itemka chanje ak $carousel-transition-durationvaryab Sass la anvan konpile oswa estil koutim si w ap itilize CSS konpile a. Si yo aplike plizyè tranzisyon, asire w ke tranzisyon transfòmasyon an defini an premye (eg transition: transform 2s ease, opacity .5s ease-out).

Sass

Varyab

Varyab pou tout karousèl:

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

Varyab pou Carousel nwa a :

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

Itilizasyon

Via atribi done yo

Sèvi ak atribi done yo fasil kontwole pozisyon nan Carousel la. data-bs-slideaksepte mo kle yo prevoswa next, ki chanje pozisyon glise an parapò ak pozisyon aktyèl li. Altènativman, sèvi ak data-bs-slide-toyo pase yon endèks glise anvan tout koreksyon nan Carousel la data-bs-slide-to="2", ki chanjman pozisyon glise nan yon endèks patikilye kòmanse ak 0.

Yo data-bs-ride="carousel"itilize atribi a pou make yon Carousel kòm animasyon apati chaj paj la. Si ou pa itilize data-bs-ride="carousel"pou inisyalize Carousel ou a, ou dwe inisyalize li tèt ou. Li pa ka itilize nan konbinezon ak (redondan ak nesesè) inisyalizasyon JavaScript eksplisit nan menm Carousel la.

Via JavaScript

Rele Carousel manyèlman ak:

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

Opsyon

Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". Asire w ke w chanje kalite ka non opsyon an soti nan " camelCase " a " kebab-case " lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".

Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.

Non Kalite Default Deskripsyon
interval nimewo 5000 Kantite tan pou retade ant otomatikman monte bisiklèt yon atik.
keyboard booleyen true Si Carousel la ta dwe reyaji nan evènman klavye yo.
pause fisèl, boolean "hover" Si mete sou "hover", pran yon poz monte bisiklèt nan Carousel la mouseenterepi rekòmanse monte bisiklèt la nan Carousel la mouseleave. Si mete sou false, plane sou Carousel la pa pral pran poz li. Sou aparèy manyen yo, lè yo mete sou "hover", monte bisiklèt ap pran yon poz sou touchend(yon fwa itilizatè a fini kominike avèk Carousel la) pou de entèval, anvan otomatikman rekòmanse. Sa a se nan adisyon a konpòtman an sourit.
ride fisèl, boolean false Si yo mete sou true, li otomatikman jwe Carousel la apre itilizatè a sikile premye atik la manyèlman. Si mete sou "carousel", lire otomatikman Carousel la sou chaj.
touch booleyen true Si Carousel la ta dwe sipòte entèraksyon glise gòch/dwat sou aparèy tactile.
wrap booleyen true Kit Carousel la ta dwe sikile kontinyèlman oswa si wi ou non si w ta dwe fè yon kanpe difisil.

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

Ou ka kreye yon egzanp Carousel ak konstrukteur Carousel la, pou egzanp, inisyalize ak opsyon adisyonèl epi kòmanse monte bisiklèt nan atik:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metòd Deskripsyon
cycle Fè sik nan atik yo Carousel de goch a dwat.
dispose Detwi Carousel yon eleman. (Retire done ki estoke sou eleman DOM)
getInstance Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element).
next Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).
nextWhenVisible Don’t cycle carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the target item has been shown.
pause Stops the carousel from cycling through items.
prev Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).
to Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs).

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
  • from: The index of the current item
  • to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event type Description
slid.bs.carousel Te tire lè Carousel la fini tranzisyon glise li yo.
slide.bs.carousel Dife imedyatman lè yo slideenvoke metòd egzanp lan. 
const myCarousel = document.getElementById('myCarousel')

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