Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Korsel

Komponen tayangan slide untuk menelusuri elemen—gambar atau slide teks—seperti korsel.

Di halaman ini

Bagaimana itu bekerja

Korsel adalah tayangan slide untuk bersepeda melalui serangkaian konten, dibuat dengan transformasi 3D CSS dan sedikit JavaScript. Ia bekerja dengan serangkaian gambar, teks, atau markup kustom. Ini juga mencakup dukungan untuk kontrol dan indikator sebelumnya/berikutnya.

Di browser yang mendukung API Visibilitas Halaman , carousel akan menghindari geser saat halaman web tidak terlihat oleh pengguna (seperti saat tab browser tidak aktif, jendela browser diminimalkan, dll.).

Efek animasi komponen ini bergantung pada prefers-reduced-motionkueri media. Lihat bagian pengurangan gerakan pada dokumentasi aksesibilitas kami .

Perlu diketahui bahwa carousel bersarang tidak didukung, dan carousel umumnya tidak sesuai dengan standar aksesibilitas.

Contoh

Korsel tidak secara otomatis menormalkan dimensi slide. Dengan demikian, Anda mungkin perlu menggunakan utilitas tambahan atau gaya kustom untuk menyesuaikan ukuran konten. Meskipun carousel mendukung kontrol dan indikator sebelumnya/berikutnya, mereka tidak secara eksplisit diperlukan. Tambahkan dan sesuaikan sesuai keinginan Anda.

Kelas .activeperlu ditambahkan ke salah satu slide jika tidak, korsel tidak akan terlihat. Pastikan juga untuk mengatur unik idpada .carouseluntuk kontrol opsional, terutama jika Anda menggunakan beberapa carousel pada satu halaman. Elemen kontrol dan indikator harus memiliki data-bs-targetatribut (atau hrefuntuk tautan) yang cocok iddengan .carouselelemen tersebut.

Hanya slide

Berikut adalah korsel dengan slide saja. Perhatikan keberadaan .d-blockdan .w-100pada gambar carousel untuk mencegah perataan gambar default 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>

Dengan kontrol

Menambahkan kontrol sebelumnya dan berikutnya. Sebaiknya gunakan <button>elemen, tetapi Anda juga dapat menggunakan <a>elemen dengan 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>

Dengan indikator

Anda juga dapat menambahkan indikator ke carousel, di samping kontrol juga.

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>

Dengan keterangan

Tambahkan teks ke slide Anda dengan mudah dengan .carousel-captionelemen di dalam file .carousel-item. Mereka dapat dengan mudah disembunyikan di area pandang yang lebih kecil, seperti yang ditunjukkan di bawah ini, dengan utilitas tampilan opsional . Kami menyembunyikannya pada awalnya dengan .d-nonedan mengembalikannya ke perangkat berukuran sedang dengan .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

Tambahkan .carousel-fadeke carousel Anda untuk menganimasikan slide dengan transisi fade, bukan slide. Bergantung pada konten carousel Anda (misalnya, slide hanya teks), Anda mungkin ingin menambahkan .bg-bodyatau beberapa CSS khusus ke .carousel-items untuk crossfading yang tepat.

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>

Tambahkan data-bs-interval=""ke a .carousel-itemuntuk mengubah jumlah waktu tunda antara siklus otomatis ke item berikutnya.

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>

Nonaktifkan sentuhan menggesek

Carousel mendukung penggesekan ke kiri/kanan pada perangkat layar sentuh untuk berpindah antar slide. Ini dapat dinonaktifkan menggunakan data-bs-touchatribut. Contoh di bawah ini juga tidak menyertakan data-bs-rideatribut sehingga tidak 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 gelap

Tambahkan .carousel-darkke .carouseluntuk kontrol, indikator, dan keterangan yang lebih gelap. Kontrol telah dibalik dari isian putih default dengan filterproperti CSS. Teks dan kontrol memiliki variabel Sass tambahan yang menyesuaikan colordan 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>

Transisi khusus

Durasi transisi .carousel-itemdapat diubah dengan $carousel-transition-durationvariabel Sass sebelum kompilasi atau gaya kustom jika Anda menggunakan CSS yang dikompilasi. Jika beberapa transisi diterapkan, pastikan transisi transformasi didefinisikan terlebih dahulu (mis transition: transform 2s ease, opacity .5s ease-out.).

Kelancangan

Variabel

Variabel untuk semua 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`)

Variabel untuk korsel gelap :

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

Penggunaan

Melalui atribut data

Gunakan atribut data untuk mengontrol posisi carousel dengan mudah. data-bs-slidemenerima kata kunci prevatau next, yang mengubah posisi slide relatif terhadap posisinya saat ini. Atau, gunakan data-bs-slide-tountuk meneruskan indeks slide mentah ke carousel data-bs-slide-to="2", yang menggeser posisi slide ke indeks tertentu yang diawali dengan 0.

Atribut data-bs-ride="carousel"ini digunakan untuk menandai carousel sebagai animasi mulai dari pemuatan halaman. Jika Anda tidak menggunakan data-bs-ride="carousel"untuk menginisialisasi carousel Anda, Anda harus menginisialisasi sendiri. Itu tidak dapat digunakan dalam kombinasi dengan inisialisasi JavaScript eksplisit (berlebihan dan tidak perlu) dari korsel yang sama.

Melalui JavaScript

Panggil carousel secara manual dengan:

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

Pilihan

Karena opsi dapat diteruskan melalui atribut data atau JavaScript, Anda dapat menambahkan nama opsi ke data-bs-, seperti pada data-bs-animation="{value}". Pastikan untuk mengubah jenis huruf dari nama opsi dari “ camelCase ” menjadi “ kebab-case ” saat meneruskan opsi melalui atribut data. Misalnya, gunakan data-bs-custom-class="beautifier"alih-alih data-bs-customClass="beautifier".

Pada Bootstrap 5.2.0, semua komponen mendukung atribut data cadangan eksperimentaldata-bs-config yang dapat menampung konfigurasi komponen sederhana sebagai string JSON. Ketika suatu elemen memiliki data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang terpisah akan menimpa nilai yang diberikan pada data-bs-config. Selain itu, atribut data yang ada dapat menampung nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Nama Jenis Bawaan Keterangan
interval nomor 5000 Jumlah waktu tunda antara siklus item secara otomatis.
keyboard boolean true Apakah carousel harus bereaksi terhadap peristiwa keyboard.
pause string, boolean "hover" Jika diatur ke "hover", menjeda siklus korsel aktif mouseenterdan melanjutkan siklus korsel aktif mouseleave. Jika disetel ke false, mengarahkan kursor ke korsel tidak akan menjedanya. Pada perangkat yang mendukung sentuhan, saat disetel ke "hover", siklus akan berhenti touchend(setelah pengguna selesai berinteraksi dengan carousel) selama dua interval, sebelum dilanjutkan secara otomatis. Ini selain perilaku mouse.
ride string, boolean false Jika disetel ke true, putar korsel secara otomatis setelah pengguna memutar item pertama secara manual. Jika disetel ke "carousel", memutar korsel secara otomatis saat dimuat.
touch boolean true Apakah carousel harus mendukung interaksi geser ke kiri/kanan pada perangkat layar sentuh.
wrap boolean true Apakah korsel harus berputar terus menerus atau berhenti keras.

Metode

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .

Anda dapat membuat instance carousel dengan konstruktor carousel, misalnya, untuk menginisialisasi dengan opsi tambahan dan mulai bersepeda melalui item:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
metode Keterangan
cycle Siklus melalui item korsel dari kiri ke kanan.
dispose Menghancurkan korsel elemen. (Menghapus data yang tersimpan pada elemen 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 Diaktifkan saat carousel telah menyelesaikan transisi slidenya.
slide.bs.carousel Diaktifkan segera saat slidemetode instance dipanggil. 
const myCarousel = document.getElementById('myCarousel')

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