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.).

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

Terakhir, jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.js .

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 menyetel id unik pada .carouseluntuk kontrol opsional, terutama jika Anda menggunakan beberapa carousel pada satu halaman. Elemen kontrol dan indikator harus memiliki data-targetatribut (atau hrefuntuk tautan) yang cocok dengan id .carouselelemen.

Hanya slide

Berikut adalah korsel dengan slide saja. Perhatikan keberadaan .d-blockdan .w-100pada gambar carousel untuk mencegah perataan gambar default browser.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Dengan kontrol

Menambahkan kontrol sebelumnya dan berikutnya:

Sebelumnya Lanjut

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Dengan indikator

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

Sebelumnya Lanjut

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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.

Label slide pertama

Nulla vitae elit libero, sebuah pharetra augue mollis interdum.

Label slide kedua

Lorem ipsum dolor sit amet, conectetur adipiscing elit.

Label slide ketiga

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Sebelumnya Lanjut

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

Tambahkan .carousel-fadeke carousel Anda untuk menganimasikan slide dengan transisi fade, bukan slide.

Sebelumnya Lanjut

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Penggunaan

Melalui atribut data

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

Atribut data-ride="carousel"ini digunakan untuk menandai carousel sebagai animasi mulai dari pemuatan halaman. Ini tidak dapat digunakan dalam kombinasi dengan inisialisasi JavaScript eksplisit (berlebihan dan tidak perlu) dari carousel yang sama.

Melalui JavaScript

Panggil carousel secara manual dengan:

$('.carousel').carousel()

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-interval="".

Metode

.carousel(options)

Menginisialisasi korsel dengan opsi opsional objectdan mulai menelusuri item.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Siklus melalui item korsel dari kiri ke kanan.

.carousel('pause')

Menghentikan korsel dari bersepeda melalui item.

.carousel(number)

Menggerakkan korsel ke bingkai tertentu (berbasis 0, mirip dengan larik). Kembali ke pemanggil sebelum item target ditampilkan (yaitu sebelum slid.bs.carouselperistiwa terjadi).

.carousel('prev')

Siklus ke item sebelumnya. Kembali ke pemanggil sebelum item sebelumnya ditampilkan (yaitu sebelum slid.bs.carouselperistiwa terjadi).

.carousel('next')

Siklus ke item berikutnya. Kembali ke pemanggil sebelum item berikutnya ditampilkan (yaitu sebelum slid.bs.carouselperistiwa terjadi).

.carousel('dispose')

Menghancurkan korsel elemen.

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 ini
• to: Indeks item berikutnya

Semua event carousel dipicu pada carousel itu sendiri (yaitu pada <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Ubah durasi transisi

Durasi transisi .carousel-itemdapat diubah dengan $carousel-transitionvariabel 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).