karusel

Komponen tayangan slaid untuk melayari elemen—imej atau slaid teks—seperti karusel.

Bagaimana ia berfungsi

Karusel ialah tayangan slaid untuk berbasikal melalui satu siri kandungan, dibina dengan perubahan CSS 3D dan sedikit JavaScript. Ia berfungsi dengan satu siri imej, teks atau penanda tersuai. Ia juga termasuk sokongan untuk kawalan dan penunjuk sebelumnya/seterusnya.

Dalam penyemak imbas di mana API Keterlihatan Halaman disokong, karusel akan mengelakkan gelongsor apabila halaman web tidak kelihatan kepada pengguna (seperti apabila tab penyemak imbas tidak aktif, tetingkap penyemak imbas diminimumkan, dsb.).

Harap maklum bahawa karusel bersarang tidak disokong dan karusel biasanya tidak mematuhi piawaian kebolehaksesan.

Akhir sekali, jika anda membina JavaScript kami daripada sumber, ia memerlukanutil.js .

Contoh

Karusel tidak menormalkan dimensi slaid secara automatik. Oleh itu, anda mungkin perlu menggunakan utiliti tambahan atau gaya tersuai untuk saiz kandungan yang sesuai. Walaupun karusel menyokong kawalan dan penunjuk sebelumnya/seterusnya, ia tidak diperlukan secara eksplisit. Tambah dan sesuaikan mengikut kesesuaian anda.

Pastikan anda menetapkan id unik pada .carouselkawalan pilihan, terutamanya jika anda menggunakan berbilang karusel pada satu halaman.

Slaid sahaja

Berikut ialah karusel dengan slaid sahaja. Perhatikan kehadiran imej karusel .d-blockdan .img-fluidpada untuk mengelakkan penjajaran imej lalai penyemak imbas.

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Dengan kawalan

Menambah dalam kawalan sebelumnya dan seterusnya:

Sebelumnya Seterusnya

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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 penunjuk

Anda juga boleh menambah penunjuk pada karusel, di samping kawalan juga.

Sebelumnya Seterusnya

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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 kapsyen

Tambahkan kapsyen pada slaid anda dengan mudah dengan .carousel-captionelemen dalam mana-mana .carousel-item. Ia boleh disembunyikan dengan mudah pada port pandangan yang lebih kecil, seperti yang ditunjukkan di bawah, dengan utiliti paparan pilihan . Kami menyembunyikannya pada mulanya dengan .d-nonedan membawanya kembali pada peranti bersaiz sederhana dengan .d-md-block.

Label slaid pertama

Nulla vitae elit libero, a pharetra augue mollis interdum.

Label slaid kedua

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Label slaid ketiga

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Sebelumnya Seterusnya

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

Penggunaan

Melalui atribut data

Gunakan atribut data untuk mengawal kedudukan karusel dengan mudah. data-slidemenerima kata kunci prevatau next, yang mengubah kedudukan slaid berbanding kedudukan semasanya. Sebagai alternatif, gunakan data-slide-tountuk menghantar indeks slaid mentah ke karusel data-slide-to="2", yang mengalihkan kedudukan slaid kepada indeks tertentu bermula dengan 0.

Atribut data-ride="carousel"digunakan untuk menandakan karusel sebagai animasi bermula pada pemuatan halaman. Ia tidak boleh digunakan dalam kombinasi dengan (berlebihan dan tidak perlu) pemula JavaScript eksplisit bagi karusel yang sama.

Melalui JavaScript

Panggil karusel secara manual dengan:

$('.carousel').carousel()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-interval="".

Kaedah

.carousel(options)

Memulakan karusel dengan pilihan pilihan objectdan mula berbasikal melalui item.

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

.carousel('cycle')

Kitaran melalui item karusel dari kiri ke kanan.

.carousel('pause')

Menghentikan karusel daripada berbasikal melalui item.

.carousel(number)

Mengitar karusel ke bingkai tertentu (berasaskan 0, serupa dengan tatasusunan). Kembali kepada pemanggil sebelum item sasaran ditunjukkan (iaitu sebelum slid.bs.carouselperistiwa berlaku).

.carousel('prev')

Kitaran ke item sebelumnya. Kembali kepada pemanggil sebelum item sebelumnya telah ditunjukkan (iaitu sebelum slid.bs.carouselperistiwa berlaku).

.carousel('next')

Kitaran ke item seterusnya. Kembali kepada pemanggil sebelum item seterusnya ditunjukkan (iaitu sebelum slid.bs.carouselperistiwa berlaku).

.carousel('dispose')

Memusnahkan karusel unsur.

Peristiwa

Kelas karusel Bootstrap mendedahkan dua acara untuk menyambung ke fungsi karusel. Kedua-dua acara mempunyai sifat tambahan berikut:

• direction: Arah di mana karusel sedang meluncur (sama ada "left"atau "right").
• relatedTarget: Elemen DOM yang sedang meluncur ke tempatnya sebagai item aktif.
• from: Indeks item semasa
• to: Indeks item seterusnya

Semua acara karusel dilepaskan pada karusel itu sendiri (iaitu pada <div class="carousel">).

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