Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Carousel

Usa ka bahin sa slideshow alang sa pagbisikleta pinaagi sa mga elemento—mga hulagway o mga slide sa teksto—sama sa usa ka carousel.

Niini nga panid

Giunsa kini paglihok

Ang carousel usa ka slideshow alang sa pagbisikleta pinaagi sa usa ka serye sa sulod, nga gitukod uban sa CSS 3D transforms ug gamay sa JavaScript. Naglihok kini sa usa ka serye sa mga imahe, teksto, o naandan nga marka. Naglakip usab kini sa suporta alang sa nangagi / sunod nga mga kontrol ug mga timailhan.

Sa mga browser diin ang Page Visibility API gisuportahan, ang carousel maglikay sa pag-slide kung ang webpage dili makita sa user (sama sa dihang ang tab sa browser dili aktibo, ang browser window giminusan, ug uban pa).

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Palihug hibaloi nga ang mga nested carousel dili suportado, ug ang mga carousel sa kasagaran dili uyon sa mga sumbanan sa accessibility.

Pananglitan

Ang mga carousel dili awtomatikong mag-normalize sa mga dimensyon sa slide. Ingon niana, mahimo nimong gamiton ang dugang nga mga gamit o naandan nga mga istilo sa tukma nga gidak-on sa sulud. Samtang ang mga carousel nagsuporta sa nangagi/sunod nga mga kontrol ug mga timailhan, dili kini klaro nga gikinahanglan. Idugang ug ipasibo sumala sa imong nakita nga angay.

Kinahanglan .activenga idugang ang klase sa usa sa mga slide kung dili ang carousel dili makita. Siguruha usab nga magbutang usa ka talagsaon idsa .carouselpara sa mga opsyonal nga kontrol, labi na kung naggamit ka daghang mga carousel sa usa ka panid. Ang control ug indicator nga mga elemento kinahanglang adunay data-bs-targetattribute (o hrefpara sa mga link) nga mohaum idsa .carouselelemento.

Mga slide lang

Ania ang usa ka carousel nga adunay mga slide lamang. Timan-i ang presensya sa .d-blockug .w-100sa carousel nga mga hulagway aron mapugngan ang default nga pag-align sa imahe sa browser.

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>

Uban sa mga kontrol

Pagdugang sa miaging ug sunod nga mga kontrol. Girekomenda namon ang paggamit sa <button>mga elemento, apan mahimo usab nimo gamiton ang <a>mga elemento nga adunay 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>

Uban sa mga timailhan

Mahimo usab nimong idugang ang mga timailhan sa carousel, kauban ang mga kontrol, usab.

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>

Sa mga caption

Idugang ang mga kapsyon sa imong mga slide nga dali gamit ang .carousel-captionelemento sa sulod sa bisan unsang .carousel-item. Kini dali nga matago sa gagmay nga mga viewport, sama sa gipakita sa ubos, nga adunay opsyonal nga mga gamit sa pagpakita . Among itago kini sa sinugdanan .d-noneug ibalik kini sa medium-sized nga mga himan nga adunay .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

Idugang .carousel-fadesa imong carousel aron ma-animate ang mga slide gamit ang fade transition imbes nga slide. Depende sa imong carousel content (eg, text only slides), mahimo nimong idugang .bg-bodyo pipila ka custom CSS sa .carousel-items para sa saktong 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>

Idugang data-bs-interval=""sa a .carousel-itemaron usbon ang gidugayon sa oras sa paglangan tali sa awtomatik nga pagbisikleta ngadto sa sunod nga butang.

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>

I-disable ang touch swiping

Gisuportahan sa mga carousel ang pag-swipe sa wala/tuo sa mga touchscreen device aron makalihok tali sa mga slide. Mahimo kining ma-disable gamit ang data-bs-touchattribute. Ang panig-ingnan sa ubos wala usab maglakip sa data-bs-ridehiyas aron dili kini mag-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>

Mangitngit nga variant

Idugang .carousel-darksa .carouselpara sa mas ngitngit nga mga kontrol, indikasyon, ug mga kapsyon. Ang mga kontrol gibalit-ad gikan sa ilang default nga puti nga pun-on sa filterCSS property. Ang mga caption ug mga kontrol adunay dugang nga mga variable sa Sass nga nag-customize sa colorug 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>

Pasadya nga pagbalhin

Ang gidugayon sa transisyon sa .carousel-itemmahimong mabag-o sa $carousel-transition-durationSass variable sa dili pa mag-compile o custom nga mga estilo kung imong gigamit ang giipon nga CSS. Kung daghang mga transisyon ang gipadapat, siguroa nga ang transisyon sa pagbag-o gipasabut una (eg transition: transform 2s ease, opacity .5s ease-out).

Sass

Mga variable

Mga variable alang sa tanan nga mga carousel:

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

Mga variable para sa dark carousel :

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

Paggamit

Pinaagi sa data attributes

Gamita ang data attributes aron dali makontrol ang posisyon sa carousel. data-bs-slidemidawat sa mga keyword prevo next, nga nag-usab sa posisyon sa slide kalabot sa kasamtangan nga posisyon niini. Sa laing paagi, gamita data-bs-slide-toang pagpasa sa usa ka hilaw nga slide index ngadto sa carousel data-bs-slide-to="2", nga mobalhin sa slide position ngadto sa usa ka partikular nga index nga nagsugod sa 0.

Ang data-bs-ride="carousel"attribute kay gigamit sa pagmarka sa carousel isip animating sugod sa page load. Kung dili nimo gamiton data-bs-ride="carousel"ang pagsugod sa imong carousel, kinahanglan nimo nga unahon kini sa imong kaugalingon. Dili kini magamit sa kombinasyon sa (kadaghanan ug wala kinahanglana) klaro nga pagsugod sa JavaScript sa parehas nga carousel.

Pinaagi sa JavaScript

Tawga ang carousel nga mano-mano gamit ang:

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

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Ngalan Matang Default Deskripsyon
interval numero 5000 Ang gidugayon sa paglangan tali sa awtomatik nga pagbisikleta sa usa ka butang.
keyboard boolean true Kung ang carousel kinahanglan nga mo-react sa mga panghitabo sa keyboard.
pause string, boolean "hover" Kung itakda sa "hover", ihunong ang pagbisikleta sa carousel sa mouseenterug ipadayon ang pagbisikleta sa carousel sa mouseleave. Kung itakda sa false, ang pag-hover sa carousel dili mopahunong niini. Sa touch-enabled nga mga device, kung i-set sa "hover", ang pagbisikleta mohunong sa touchend(sa higayon nga ang user mahuman sa interaksyon sa carousel) sulod sa duha ka mga agwat, sa dili pa awtomatikong ipadayon. Dugang pa kini sa pamatasan sa mouse.
ride string, boolean false Kung itakda sa true, i-autoplay ang carousel human manu-mano nga i-cycle sa user ang unang butang. Kung itakda sa "carousel", i-autoplay ang carousel sa load.
touch boolean true Kung kinahanglan ba nga suportahan sa carousel ang wala / tuo nga mga interaksyon sa pag-swipe sa mga aparato nga touchscreen.
wrap boolean true Kung ang carousel kinahanglan nga magpadayon sa pag-ikot o adunay lisud nga paghunong.

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

Makahimo ka og usa ka pananglitan sa carousel nga adunay carousel constructor, pananglitan, aron masugdan ang dugang nga mga kapilian ug magsugod sa pagbisikleta pinaagi sa mga butang:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Pamaagi Deskripsyon
cycle Naglibot sa mga butang sa carousel gikan sa wala ngadto sa tuo.
dispose Giguba ang carousel sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)
getInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa carousel nga pananglitan nga nalangkit sa usa ka elemento sa DOM, mahimo nimo kining gamiton sama niini: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Static nga pamaagi nga nagbalik sa usa ka pananglitan sa carousel nga nalangkit sa usa ka elemento sa DOM o paghimo og bag-o kung wala kini gisugdan. Mahimo nimo kini gamiton sama niini: bootstrap.Carousel.getOrCreateInstance(element).
next Mga siklo sa sunod nga aytem. Mobalik sa nagtawag sa wala pa ipakita ang sunod nga butang (pananglitan, sa wala pa slid.bs.carouselmahitabo ang panghitabo).
nextWhenVisible Ayaw pag-cycle sa carousel ngadto sa sunod kung ang panid dili makita o ang carousel o ang ginikanan niini dili makita. Mibalik sa nagtawag sa wala pa ipakita ang target nga butang .
pause Gipahunong ang carousel gikan sa pagbisikleta sa mga butang.
prev Mga siklo sa miaging aytem. Mibalik sa nagtawag sa wala pa ipakita ang miaging butang (pananglitan, sa wala pa slid.bs.carouselmahitabo ang panghitabo).
to I-cycle ang carousel ngadto sa usa ka partikular nga frame (base sa 0, susama sa array). Mibalik sa nagtawag sa wala pa ipakita ang target nga butang (pananglitan, sa wala pa slid.bs.carouselmahitabo ang panghitabo).

Mga panghitabo

Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel. Ang duha ka mga panghitabo adunay mga mosunod nga dugang nga mga kabtangan:

  • direction: Ang direksyon diin ang carousel nag-slide (bisan "left"o "right").
  • relatedTarget: Ang elemento sa DOM nga gi-slide sa lugar isip aktibo nga butang.
  • from: Ang indeks sa kasamtangan nga butang
  • to: Ang indeks sa sunod nga aytem

Ang tanan nga mga panghitabo sa carousel gipabuto sa carousel mismo (ie sa <div class="carousel">).

Uri sa panghitabo Deskripsyon
slid.bs.carousel Gipabuto sa dihang nahuman na sa carousel ang slide transition niini.
slide.bs.carousel Nagdilaab dayon kung ang slidepamaagi sa pananglitan gigamit. 
const myCarousel = document.getElementById('myCarousel')

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