Carousel

Komponen slideshow kanggo muter liwat unsur-gambar utawa slide teks-kaya carousel.

Cara kerjane

Carousel minangka slideshow kanggo muter liwat seri konten, dibangun nganggo transformasi CSS 3D lan sawetara JavaScript. Kerjane karo seri gambar, teks, utawa markup khusus. Uga kalebu dhukungan kanggo kontrol lan indikator sadurunge / sabanjure.

Ing browser ing ngendi API Visibilitas Kaca didhukung, carousel ora bakal geser nalika kaca web ora katon kanggo pangguna (kayata nalika tab browser ora aktif, jendhela browser diminimalisir, lsp.).

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Elinga yen carousel bersarang ora didhukung, lan carousel umume ora tundhuk karo standar aksesibilitas.

Pungkasan, yen sampeyan nggawe JavaScript saka sumber, mbutuhakeutil.js .

Tuladha

Carousel ora otomatis normalake ukuran geser. Dadi, sampeyan bisa uga kudu nggunakake keperluan tambahan utawa gaya khusus kanggo ukuran konten sing cocog. Nalika carousel ndhukung kontrol lan indikator sadurunge/sabanjure, ora dibutuhake kanthi jelas. Tambah lan setel kaya sing dikarepake.

Kelas .activekasebut kudu ditambahake menyang salah sawijining slide , yen ora, carousel ora bakal katon. Uga manawa kanggo nyetel unik iding .carouselkanggo kontrol opsional, utamané yen sampeyan nggunakake macem-macem carousels ing kaca siji. Unsur kontrol lan indikator kudu nduweni data-targetatribut (utawa hrefkanggo pranala) sing cocog idkaro .carouselunsur kasebut.

Mung geser

Iki carousel mung karo slide. Elinga anane gambar carousel .d-blocklan .w-100ing kanggo nyegah keselarasan gambar standar browser.

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

Kanthi kontrol

Nambahake kontrol sadurunge lan sabanjure. Disaranake nggunakake <button>unsur, nanging sampeyan uga bisa nggunakake <a>unsur karo 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>

Kanthi indikator

Sampeyan uga bisa nambah pratondho menyang carousel, bebarengan karo kontrol uga.

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

Kanthi caption

Tambah katrangan menyang slide kanthi gampang karo .carousel-captionunsur ing sembarang .carousel-item. Bisa gampang didhelikake ing viewports sing luwih cilik, kaya sing ditampilake ing ngisor iki, kanthi utilitas tampilan opsional . Kita ndhelikake ing wiwitan .d-nonelan nggawa maneh ing piranti ukuran medium kanthi .d-md-block.

Label geser pisanan

Sawetara isi placeholder wakil kanggo slide pisanan.

Label geser kapindho

Sawetara isi placeholder wakil kanggo geser kapindho.

Label geser katelu

Sawetara isi placeholder wakil kanggo slide katelu.

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

Crossfade

Tambah .carousel-fademenyang carousel kanggo nguripake slide kanthi transisi fade tinimbang slide. Gumantung ing isi carousel (contone, teks mung minger), sampeyan bisa uga pengin nambah .bg-bodyutawa sawetara CSS adat kanggo .carousel-items kanggo crossfading tepat.

<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`Interval individu

Tambah data-interval=""menyang .carousel-itemkanggo ngganti jumlah wektu tundha antarane otomatis muter kanggo item sabanjuré.

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

Pateni ngusap tutul

Carousel ndhukung ngusap ngiwa/nengen ing piranti layar demek kanggo mindhah antarane slide. Iki bisa dipateni nggunakake data-touchatribut. Conto ing ngisor iki uga ora kalebu data-rideatribut lan data-interval="false"ora muter otomatis.

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

Panggunaan

Liwat atribut data

Gunakake atribut data kanggo gampang ngontrol posisi carousel. data-slidenampa tembung kunci prevutawa next, sing ngowahi posisi geser relatif marang posisi saiki. Utawa, gunakake data-slide-tokanggo ngirim indeks geser mentah menyang carousel data-slide-to="2", sing ngganti posisi geser menyang indeks tartamtu sing diwiwiti karo 0.

Atribut data-ride="carousel"digunakake kanggo menehi tandha carousel minangka animasi wiwit mbukak kaca. Yen sampeyan ora nggunakake data-ride="carousel"kanggo miwiti carousel, sampeyan kudu miwiti dhewe. Ora bisa digunakake kanthi kombinasi karo (keluwih lan ora perlu) inisialisasi JavaScript eksplisit saka carousel sing padha.

Liwat JavaScript

Telpon carousel kanthi manual nganggo:

$('.carousel').carousel()

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-interval="".

jeneng	Jinis	Default	Katrangan
interval	nomer	5000	Jumlah wektu tundha antarane muter kanthi otomatis item. Yen `false`, carousel ora bakal otomatis muter.
papan ketik	boolean	bener	Apa carousel kudu nanggepi acara keyboard.
ngaso	senar \| boolean	'ngalayang'	Yen disetel menyang `'hover'`, ngaso muter carousel `mouseenter`lan nerusake muter carousel ing `mouseleave`. Yen disetel menyang `false`, nglayang ing carousel ora bakal ngaso. Ing piranti sing aktif tutul, yen disetel menyang `'hover'`, muter bakal ngaso ing `touchend`(yen pangguna rampung sesambungan karo carousel) kanggo rong interval, sadurunge otomatis nerusake. Elinga yen iki minangka tambahan kanggo prilaku mouse ing ndhuwur.
numpak	senar	palsu	Muter otomatis carousel sawise pangguna kanthi manual siklus item pisanan. Yen disetel kanggo `'carousel'`, autoplays carousel ing mbukak.
mbungkus	boolean	bener	Apa carousel kudu muter terus-terusan utawa kudu mandheg.
tutul	boolean	bener	Apa carousel kudu ndhukung interaksi geser ngiwa/tengen ing piranti layar demek.

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

`.carousel(options)`

Miwiti carousel kanthi opsi opsional objectlan miwiti muter item.

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

`.carousel('cycle')`

Siklus liwat item carousel saka kiwa menyang tengen.

`.carousel('pause')`

Mungkasi carousel saka muter liwat item.

`.carousel(number)`

Siklus carousel menyang pigura tartamtu (basis 0, padha karo array). Bali menyang panelpon sadurunge item target wis ditampilake (yaiku sadurunge slid.bs.carouselacara dumadi).

`.carousel('prev')`

Siklus menyang item sadurunge. Bali menyang panelpon sadurunge item sadurunge wis ditampilake (ie sadurunge slid.bs.carouselacara kedaden).

`.carousel('next')`

Siklus menyang item sabanjure. Bali menyang panelpon sadurunge item sabanjure ditampilake (yaiku sadurunge slid.bs.carouselacara kasebut kedadeyan).

`.carousel('dispose')`

Ngancurake carousel unsur.

`.carousel('nextWhenVisible')`

Aja muter carousel menyang sabanjure nalika kaca ora katon utawa carousel utawa induke ora katon. Bali menyang panelpon sadurunge item sabanjure ditampilake (yaiku sadurunge slid.bs.carouselacara kasebut kedadeyan).

`.carousel('to')`

Siklus carousel menyang pigura tartamtu (basis 0, padha karo array). Bali menyang panelpon sadurunge item sabanjure ditampilake (yaiku sadurunge slid.bs.carouselacara kasebut kedadeyan).

Acara

Kelas carousel Bootstrap nyedhiyakake rong acara kanggo nyambungake karo fungsi carousel. Kaloro acara kasebut duwe properti tambahan ing ngisor iki:

direction: Arah ing ngendi carousel ngusapake (salah siji "left"utawa "right").
relatedTarget: Unsur DOM sing lagi diluncurake minangka item aktif.
from: Indeks item saiki
to: Indeks item sabanjure

Kabeh acara carousel dipecat ing carousel dhewe (yaiku ing <div class="carousel">).

Jinis Acara	Katrangan
slide.bs.carousel	Acara iki langsung murub nalika `slide`metode conto dijaluk.
slid.bs.carousel	Acara iki dipecat nalika carousel wis rampung transisi geser.

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

Ngganti durasi transisi

Durasi transisi .carousel-itembisa diganti karo $carousel-transitionvariabel Sass sadurunge kompilasi utawa gaya khusus yen sampeyan nggunakake CSS kompilasi. Yen sawetara transisi ditrapake, priksa manawa transisi transformasi ditetepake dhisik (contone transition: transform 2s ease, opacity .5s ease-out).