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

Kesan animasi komponen ini bergantung pada prefers-reduced-motionpertanyaan media. Lihat bahagian gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .

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.

Kelas .activeperlu ditambahkan pada salah satu slaid jika tidak, karusel tidak akan kelihatan. Juga pastikan anda menetapkan unik idpada .carouseluntuk kawalan pilihan, terutamanya jika anda menggunakan berbilang karusel pada satu halaman. Elemen kawalan dan penunjuk mesti mempunyai data-targetatribut (atau hrefuntuk pautan) yang sepadan iddengan .carouselelemen tersebut.

Slaid sahaja

Berikut ialah karusel dengan slaid sahaja. Perhatikan kehadiran imej karusel .d-blockdan .w-100pada 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 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 kawalan

Menambah kawalan sebelumnya dan seterusnya. Kami mengesyorkan menggunakan <button>elemen, tetapi anda juga boleh menggunakan <a>elemen dengan role="button".

<div id="carouselExampleControls" class="carousel slide" data-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Dengan penunjuk

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

<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 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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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

Beberapa kandungan pemegang tempat yang mewakili untuk slaid pertama.

Label slaid kedua

Beberapa kandungan pemegang tempat yang mewakili untuk slaid kedua.

Label slaid ketiga

Beberapa kandungan pemegang tempat yang mewakili untuk slaid ketiga.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Pudar silang

Tambahkan .carousel-fadepada karusel anda untuk menghidupkan slaid dengan peralihan pudar dan bukannya slaid. Bergantung pada kandungan karusel anda (cth, slaid teks sahaja), anda mungkin mahu menambah .bg-bodyatau beberapa CSS tersuai pada .carousel-items untuk pemudar silang yang betul.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

`.carousel-item`Selang individu

Tambahkan data-interval=""pada a .carousel-itemuntuk menukar jumlah masa untuk menangguhkan antara berbasikal secara automatik ke item seterusnya.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Lumpuhkan leretan sentuhan

Karusel menyokong meleret ke kiri/kanan pada peranti skrin sentuh untuk bergerak antara slaid. Ini boleh dilumpuhkan menggunakan data-touchatribut. Contoh di bawah juga tidak termasuk data-rideatribut dan mempunyai data-interval="false"supaya ia tidak automain.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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. Jika anda tidak menggunakan data-ride="carousel"untuk memulakan karusel anda, anda perlu memulakannya sendiri. 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="".

Nama	taip	Lalai	Penerangan
selang waktu	nombor	5000	Jumlah masa untuk menangguhkan antara mengayuh item secara automatik. Jika `false`, karusel tidak akan berkitar secara automatik.
papan kekunci	boolean	benar	Sama ada karusel harus bertindak balas terhadap peristiwa papan kekunci.
jeda	rentetan \| boolean	'legar'	Jika ditetapkan kepada `'hover'`, jeda kitaran karusel dihidupkan `mouseenter`dan sambung semula kitaran karusel dihidupkan `mouseleave`. Jika ditetapkan kepada `false`, melayang di atas karusel tidak akan menjedanya. Pada peranti yang didayakan sentuhan, apabila ditetapkan kepada `'hover'`, berbasikal akan dijeda `touchend`(apabila pengguna selesai berinteraksi dengan karusel) selama dua selang, sebelum disambung semula secara automatik. Ambil perhatian bahawa ini adalah tambahan kepada tingkah laku tetikus di atas.
perjalanan dengan	tali	salah	Automainkan karusel selepas pengguna mengitar item pertama secara manual. Jika ditetapkan kepada `'carousel'`, automainkan karusel semasa dimuatkan.
bungkus	boolean	benar	Sama ada karusel perlu berkitar secara berterusan atau mempunyai hentian keras.
sentuh	boolean	benar	Sama ada karusel harus menyokong interaksi leret kiri/kanan pada peranti skrin sentuh.

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .

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

`.carousel('nextWhenVisible')`

Jangan kitar karusel ke seterusnya apabila halaman tidak kelihatan atau karusel atau induknya tidak kelihatan. Kembali kepada pemanggil sebelum item seterusnya ditunjukkan (iaitu sebelum slid.bs.carouselperistiwa berlaku).

`.carousel('to')`

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

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

Jenis acara	Penerangan
slaid.bs.karusel	Peristiwa ini berlaku serta-merta apabila `slide`kaedah contoh digunakan.
slid.bs.carousel	Peristiwa ini dicetuskan apabila karusel telah menyelesaikan peralihan slaidnya.

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

Tukar tempoh peralihan

Tempoh peralihan .carousel-itemboleh ditukar dengan $carousel-transitionpembolehubah Sass sebelum menyusun atau gaya tersuai jika anda menggunakan CSS yang disusun. Jika berbilang peralihan digunakan, pastikan peralihan transformasi ditakrifkan dahulu (cth. transition: transform 2s ease, opacity .5s ease-out).