Korsel
Komponen tayangan slide untuk menelusuri elemen—gambar atau slide teks—seperti korsel.
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.).
prefers-reduced-motion
kueri 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 .active
perlu ditambahkan ke salah satu slide jika tidak, korsel tidak akan terlihat. Pastikan juga untuk mengatur unik id
pada .carousel
untuk kontrol opsional, terutama jika Anda menggunakan beberapa carousel pada satu halaman. Elemen kontrol dan indikator harus memiliki data-bs-target
atribut (atau href
untuk tautan) yang cocok id
dengan .carousel
elemen tersebut.
Hanya slide
Berikut adalah korsel dengan slide saja. Perhatikan keberadaan .d-block
dan .w-100
pada gambar carousel untuk mencegah perataan gambar default browser.
<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"
.
<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.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<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-caption
elemen 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-none
dan mengembalikannya ke perangkat berukuran sedang dengan .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<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-fade
ke carousel Anda untuk menganimasikan slide dengan transisi fade, bukan slide.
<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
Tambahkan data-bs-interval=""
ke a .carousel-item
untuk mengubah jumlah waktu tunda antara siklus otomatis ke item berikutnya.
<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-touch
atribut. Contoh di bawah ini juga tidak menyertakan data-bs-ride
atribut dan memiliki data-bs-interval="false"
sehingga tidak diputar otomatis.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="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-dark
ke .carousel
untuk kontrol, indikator, dan keterangan yang lebih gelap. Kontrol telah dibalik dari isian putih default dengan filter
properti CSS. Teks dan kontrol memiliki variabel Sass tambahan yang menyesuaikan color
dan background-color
.
<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-item
dapat diubah dengan $carousel-transition-duration
variabel 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
$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`)
$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-slide
menerima kata kunci prev
atau next
, yang mengubah posisi slide relatif terhadap posisinya saat ini. Atau, gunakan data-bs-slide-to
untuk 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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Pilihan
Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-bs-
, seperti pada data-bs-interval=""
.
Nama | Jenis | Bawaan | Keterangan |
---|---|---|---|
interval |
nomor | 5000 |
Jumlah waktu tunda antara bersepeda item secara otomatis. Jika false , carousel tidak akan berputar secara otomatis. |
keyboard |
boolean | true |
Apakah carousel harus bereaksi terhadap peristiwa keyboard. |
pause |
string | boolean | 'hover' |
Jika diatur ke Pada perangkat yang mendukung sentuhan, saat disetel ke |
ride |
string | boolean | false |
Memutar korsel secara otomatis setelah pengguna memutar item pertama secara manual. Jika disetel ke 'carousel' , memutar korsel secara otomatis saat dimuat. |
wrap |
boolean | true |
Apakah korsel harus berputar terus menerus atau berhenti keras. |
touch |
boolean | true |
Apakah carousel harus mendukung interaksi geser ke kiri/kanan pada perangkat layar sentuh. |
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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
metode | Keterangan |
---|---|
cycle |
Siklus melalui item korsel dari kiri ke kanan. |
pause |
Menghentikan korsel dari bersepeda melalui item. |
prev |
Siklus ke item sebelumnya. Kembali ke pemanggil sebelum item sebelumnya ditampilkan (misalnya, sebelum slid.bs.carousel peristiwa terjadi). |
next |
Siklus ke item berikutnya. Kembali ke pemanggil sebelum item berikutnya ditampilkan (misalnya, sebelum slid.bs.carousel peristiwa terjadi). |
nextWhenVisible |
Jangan putar carousel ke berikutnya saat halaman tidak terlihat atau carousel atau induknya tidak terlihat. Kembali ke pemanggil sebelum item target ditampilkan |
to |
Menggerakkan korsel ke bingkai tertentu (berbasis 0, mirip dengan larik). Kembali ke pemanggil sebelum item target ditampilkan (misalnya, sebelum slid.bs.carousel peristiwa terjadi). |
dispose |
Menghancurkan korsel elemen. (Menghapus data yang tersimpan pada elemen DOM) |
getInstance |
Metode statis yang memungkinkan Anda untuk mendapatkan instance carousel yang terkait dengan elemen DOM, Anda dapat menggunakannya seperti ini:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Metode statis yang mengembalikan instance carousel yang terkait dengan elemen DOM atau membuat yang baru jika tidak diinisialisasi. Anda dapat menggunakannya seperti ini:bootstrap.Carousel.getOrCreateInstance(element) |
Acara
Kelas carousel Bootstrap memperlihatkan dua peristiwa untuk menghubungkan ke fungsionalitas carousel. Kedua acara memiliki properti tambahan berikut:
direction
: Arah korsel meluncur (salah satu"left"
atau"right"
).relatedTarget
: Elemen DOM yang sedang digeser ke tempatnya sebagai item aktif.from
: Indeks item saat inito
: Indeks item berikutnya
Semua event carousel dipicu pada carousel itu sendiri (yaitu pada <div class="carousel">
).
Jenis acara | Keterangan |
---|---|
slide.bs.carousel |
Diaktifkan segera saat slide metode instance dipanggil. |
slid.bs.carousel |
Diaktifkan saat carousel telah menyelesaikan transisi slidenya. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})