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

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.

Pesthekake nyetel id unik .carouselkanggo kontrol opsional, utamane yen sampeyan nggunakake macem-macem carousel ing siji kaca.

Mung geser

Iki carousel mung karo slide. Elinga anane gambar carousel .d-blocklan .img-fluiding 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 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>

Kanthi kontrol

Nambahake kontrol sadurunge lan sabanjure:

Sadurunge Sabanjure

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

Kanthi indikator

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

Sadurunge Sabanjure

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

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

Nulla vitae elit libero, a pharetra augue mollis interdum.

Label geser kapindho

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Label geser katelu

Praesent commodo cursus magna, utawa scelerisque nisl consectetur.

Sadurunge Sabanjure

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

Metode

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

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

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