Carousel

Komponén pintonan slaid pikeun ngurilingan elemen—gambar atanapi slide téks—sapertos carousel.

Dina kaca ieu

Kumaha gawéna

Carousel nyaéta pintonan slaid pikeun ngurilingan runtuyan eusi, diwangun ku CSS 3D transforms sarta saeutik JavaScript. Gawéna sareng séri gambar, téks, atanapi markup khusus. Éta ogé kalebet dukungan pikeun kontrol sareng indikator sateuacana / salajengna.

Dina panyungsi dimana Page Visibility API dirojong, carousel bakal ngahindarkeun ngageser nalika halaman wéb henteu katingali ku pangguna (sapertos nalika tab browser teu aktip, jandela browser diminimalkeun, jsb.).

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Punten perhatikeun yén carousel bersarang henteu didukung, sareng carousel umumna henteu patuh kana standar aksés.

Contona

Carousel henteu otomatis nganormalkeun dimensi slide. Sapertos kitu, anjeun panginten kedah nganggo utilitas tambahan atanapi gaya khusus pikeun ukuran eusi anu pas. Nalika carousel ngadukung kontrol sareng indikator sateuacana/salajengna, aranjeunna henteu diperyogikeun sacara eksplisit. Tambihkeun sareng saluyukeun sakumaha anu anjeun pikahoyong.

Kelas .activekudu ditambahkeun kana salah sahiji slides disebutkeun carousel moal katingali. Ogé pastikeun pikeun nyetel hiji unik iddina .carouselpikeun kadali pilihan, utamana lamun nuju ngagunakeun sababaraha carousels dina hiji kaca. Unsur kontrol sareng indikator kedah gaduh data-bs-targetatribut (atanapi hrefkanggo tautan) anu cocog idsareng .carouselunsur.

Ngageser wungkul

Ieu carousel kalayan slide wungkul. Catet ayana gambar carousel .d-blocksareng .w-100on pikeun nyegah alignment gambar standar 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>

Kalawan kadali

Nambahkeun dina kadali saméméhna jeung saterusna. Kami ngarékoméndasikeun ngagunakeun <button>elemen, Tapi anjeun oge bisa make <a>elemen kalawan 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>

Kalayan indikator

Anjeun ogé tiasa nambihan indikator kana carousel, sareng kadali ogé.

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>

Kalayan caption

Tambihkeun caption kana slide anjeun kalayan gampang kalayan .carousel-captionunsur anu aya dina .carousel-item. Éta bisa gampang disumputkeun dina viewports leutik, ditémbongkeun saperti di handap ieu, kalawan utilitas tampilan pilihan . Urang nyumputkeunana mimitina .d-nonejeung mawa eta deui dina alat-ukuran sedeng jeung .d-md-block.

Label slide munggaran

Sababaraha eusi placeholder wawakil pikeun slide munggaran.

labél slide kadua

Sababaraha eusi placeholder wawakil pikeun slide kadua.

labél slide katilu

Sababaraha eusi placeholder wawakil pikeun slide katilu.

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

Tambihkeun .carousel-fadekana carousel anjeun pikeun ngahirupkeun slide kalayan transisi luntur tibatan slide. Gumantung kana eusi carousel anjeun (misalna téks ngan slides), Anjeun meureun hoyong tambahkeun .bg-bodyatawa sababaraha CSS custom ka .carousel-items pikeun crossfading ditangtoskeun.

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>

`.carousel-item`Interval individu

Tambahkeun data-bs-interval=""ka a .carousel-itemngarobah jumlah waktu reureuh antara otomatis Ngabuburit ka item salajengna.

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>

Nonaktipkeun touch swiping

Carousels ngarojong swiping ka kenca/katuhu dina alat layar rampa pikeun mindahkeun antara slides. Ieu tiasa ditumpurkeun nganggo data-bs-touchatribut. Conto di handap ogé henteu kalebet data-bs-rideatribut supados henteu 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>

Varian poék

Tambihkeun .carousel-darkkana .carouselkontrol, indikator, sareng caption anu langkung poék. Kadali parantos dibalikkeun tina eusian bodas standarna sareng filtersipat CSS. Captions sareng kadali gaduh variabel Sass tambahan anu ngaluyukeun colorsareng background-color.

Label slide munggaran

Sababaraha eusi placeholder wawakil pikeun slide munggaran.

labél slide kadua

Sababaraha eusi placeholder wawakil pikeun slide kadua.

labél slide katilu

Sababaraha eusi placeholder wawakil pikeun slide katilu.

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>

Transisi custom

Durasi transisi .carousel-itemtiasa dirobih ku $carousel-transition-durationvariabel Sass sateuacan kompilasi atanapi gaya khusus upami anjeun nganggo CSS anu disusun. Upami sababaraha transisi diterapkeun, pastikeun transisi transformasi ditetepkeun heula (contona transition: transform 2s ease, opacity .5s ease-out).

Sass

Variabel

Variabel pikeun sakabéh 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`)

Variabel pikeun carousel poék :

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

Pamakéan

Via atribut data

Paké atribut data pikeun gampang ngadalikeun posisi carousel nu. data-bs-slidenarima kecap konci prevatawa next, nu ngarobah posisi slide relatif ka posisi ayeuna. Alternatipna, pake data-bs-slide-topikeun ngalirkeun indéks slide atah ka carousel data-bs-slide-to="2", nu shifts posisi slide ka indéks husus dimimitian ku 0.

Atribut data-bs-ride="carousel"ieu dianggo pikeun nandaan carousel salaku animasi dimimitian dina beban halaman. Upami anjeun henteu nganggo data-bs-ride="carousel"pikeun ngamimitian carousel anjeun, anjeun kedah ngamimitian nyalira. Ieu teu bisa dipaké dina kombinasi kalayan (kaleuleuwihan sarta teu perlu) initialization JavaScript eksplisit tina carousel sarua.

Ngaliwatan JavaScript

Telepon carousel sacara manual nganggo:

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

Pilihan

Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.

Ngaran	Tipe	Default	Katerangan
`interval`	angka	`5000`	Jumlah waktu reureuh antara otomatis Ngabuburit hiji item.
`keyboard`	boolean	`true`	Naha carousel kedah ngaréspon kana acara keyboard.
`pause`	string, boolean	`"hover"`	Lamun disetel ka `"hover"`, ngareureuhkeun muter tina carousel on `mouseenter`sarta neruskeun muter tina carousel on `mouseleave`. Upami disetel ka `false`, hovering dina carousel moal ngareureuhkeun eta. Dina alat-alat touch-diaktipkeun, lamun disetel ka `"hover"`, Ngabuburit bakal ngareureuhkeun on `touchend`(sakali pamaké réngsé berinteraksi sareng carousel) pikeun dua interval, saméméh otomatis neruskeun. Ieu salian ti kabiasaan beurit.
`ride`	string, boolean	`false`	Lamun disetel ka `true`, autoplays carousel sanggeus pamaké sacara manual siklus item kahiji. Upami disetel ka `"carousel"`, autoplays carousel on beban.
`touch`	boolean	`true`	Naha carousel kedah ngadukung interaksi gesek kenca/katuhu dina alat layar rampa.
`wrap`	boolean	`true`	Naha carousel kedah ngurilingan kontinyu atanapi kedah eureun.

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

Anjeun tiasa nyiptakeun conto carousel sareng konstruktor carousel, contona, pikeun ngamimitian nganggo pilihan tambahan sareng ngamimitian ngagulung barang:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Métode	Katerangan
`cycle`	Siklus ngaliwatan item carousel ti kénca ka katuhu.
`dispose`	Ngancurkeun carousel hiji unsur. (Ngahapus data anu disimpen dina unsur DOM)
`getInstance`	Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto carousel anu aya hubunganana sareng unsur DOM, anjeun tiasa nganggo sapertos kieu: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Métode statik anu ngabalikeun conto carousel anu aya hubunganana sareng unsur DOM atanapi ngadamel anu énggal upami henteu diinisialisasi. Anjeun tiasa nganggo sapertos kieu: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Siklus ka item salajengna. Mulih ka nu nelepon saméméh item salajengna geus ditémbongkeun (contona, saméméh `slid.bs.carousel`acara lumangsung).
`nextWhenVisible`	Entong ngurilingan carousel ka hareup nalika halamanna henteu katingali atanapi carousel atanapi indungna henteu katingali. Mulang deui ka panelepon sateuacan item targét ditingalikeun .
`pause`	Ngeureunkeun carousel tina ngurilingan barang.
`prev`	Siklus ka item saméméhna. Mulih ka nu nelepon saméméh item saméméhna geus ditémbongkeun (misalna saméméh `slid.bs.carousel`acara lumangsung).
`to`	Siklus carousel kana pigura nu tangtu (0 dumasar, sarupa hiji Asép Sunandar Sunarya). Mulih ka panelepon saencan item udagan geus ditémbongkeun (contona, saméméh `slid.bs.carousel`acara lumangsung).

Kajadian

Kelas carousel Bootstrap ngungkabkeun dua acara pikeun ngaitkeun kana fungsionalitas carousel. Kadua acara gaduh sipat tambahan di handap ieu:

direction: Arah nu carousel nu ngageser (boh "left"atawa "right").
relatedTarget: Unsur DOM nu keur slid kana tempat salaku item aktip.
from: Indéks item ayeuna
to: Indéks item salajengna

Sadaya acara carousel dipecat dina carousel sorangan (ie di <div class="carousel">).

Jenis acara	Katerangan
`slid.bs.carousel`	Dipecat nalika carousel geus réngsé transisi slide na.
`slide.bs.carousel`	Dihurungkeun langsung nalika `slide`metodeu instance didamel.

const myCarousel = document.getElementById('myCarousel')

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

Carousel

Kumaha gawéna

Contona

Ngageser wungkul

Kalawan kadali

Kalayan indikator

Kalayan caption

Label slide munggaran

labél slide kadua

labél slide katilu

Crossfade

.carousel-itemInterval individu

Nonaktipkeun touch swiping

Varian poék

Label slide munggaran

labél slide kadua

labél slide katilu

Transisi custom

Sass

Variabel

Pamakéan

Via atribut data

Ngaliwatan JavaScript

Pilihan

Métode

Métode Asynchronous sareng transisi

Kajadian

`.carousel-item`Interval individu