Carousel

Komponén pintonan slaid pikeun ngurilingan elemen—gambar atanapi slide téks—sapertos carousel.

Kumaha gawéna

Carousel mangrupikeun pintonan slaid pikeun ngurilingan sababaraha kontén, diwangun ku transformasi CSS 3D sareng sakedik JavaScript. Gawéna sareng séri gambar, téks, atanapi markup khusus. Éta ogé kalebet dukungan pikeun kontrol sareng indikator sateuacana / salajengna.

Dina panyungsi dimana Page Visibility API dirojong, carousel bakal ngahindarkeun ngageser nalika halaman wéb henteu katingali ku pangguna (sapertos nalika tab browser teu aktip, jandela browser diminimalkeun, jsb.).

Punten perhatikeun yén carousel bersarang henteu didukung, sareng carousel umumna henteu patuh kana standar aksés.

Anu pamungkas, upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js .

Contona

Carousel henteu otomatis nganormalkeun dimensi slide. Sapertos kitu, anjeun panginten kedah nganggo utilitas tambahan atanapi gaya khusus pikeun ukuran eusi anu pas. Nalika carousel ngadukung kontrol sareng indikator sateuacana/salajengna, aranjeunna henteu diperyogikeun sacara eksplisit. Tambihkeun sareng saluyukeun sakumaha anu anjeun pikahoyong.

Kelas .activekudu ditambahkeun kana salah sahiji slides disebutkeun carousel moal katingali. Ogé pastikeun pikeun nyetel id unik dina .carouselkadali pilihan, utamana lamun Anjeun keur make sababaraha carousels dina hiji kaca. Kontrol jeung indikator elemen kudu boga data-targetatribut (atawa hrefpikeun tumbu) nu cocog jeung id .carouselunsur.

Ngageser wungkul

Ieu carousel sareng slides wungkul. Catet ayana gambar carousel .d-blocksareng .w-100on pikeun nyegah alignment 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=".../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>

Kalawan kadali

Nambahkeun kadali saméméhna sareng salajengna:

saméméhna Teras

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

Kalayan indikator

Anjeun ogé tiasa nambihan indikator kana carousel, sareng kadali ogé.

saméméhna Teras

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

Kalayan caption

Tambihkeun caption kana slide anjeun kalayan gampang kalayan .carousel-captionunsur anu aya dina .carousel-item. Éta bisa gampang disumputkeun dina viewports leutik, ditémbongkeun saperti di handap ieu, kalawan utilitas tampilan pilihan . Urang nyumputkeunana mimitina .d-nonejeung mawa eta deui dina alat-ukuran sedeng jeung .d-md-block.

Label slide munggaran

Nulla vitae elit libero, a pharetra augue mollis interdum.

labél slide kadua

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

labél slide katilu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

saméméhna Teras

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

Crossfade

Tambihkeun .carousel-fadekana carousel anjeun pikeun ngahirupkeun slide kalayan transisi luntur tibatan slide.

saméméhna Teras

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

Pamakéan

Via atribut data

Paké atribut data pikeun gampang ngadalikeun posisi carousel nu. data-slidenarima kecap konci prevatawa next, nu ngarobah posisi slide relatif ka posisi ayeuna. Alternatipna, pake data-slide-topikeun ngirimkeun indéks slide atah ka carousel data-slide-to="2", anu mindahkeun posisi slide ka indéks tinangtu dimimitian ku 0.

Atribut data-ride="carousel"dipaké pikeun nandaan carousel salaku animasi dimimitian dina beban kaca. Ieu teu bisa dipaké dina kombinasi kalayan (kaleuleuwihan jeung teu perlu) initialization JavaScript eksplisit tina carousel sarua.

Ngaliwatan JavaScript

Telepon carousel sacara manual nganggo:

$('.carousel').carousel()

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-interval="".

Métode

.carousel(options)

Initializes carousel kalawan pilihan pilihan objecttur mimitian Ngabuburit ngaliwatan item.

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

.carousel('cycle')

Siklus ngaliwatan item carousel ti kénca ka katuhu.

.carousel('pause')

Ngeureunkeun carousel tina ngurilingan barang.

.carousel(number)

Siklus carousel kana pigura nu tangtu (0 dumasar, sarupa hiji Asép Sunandar Sunarya). Mulih ka nu nelepon saméméh item target geus ditémbongkeun (ie saméméh slid.bs.carouselacara lumangsung).

.carousel('prev')

Siklus ka item saméméhna. Mulih ka nu nelepon saméméh item saméméhna geus ditémbongkeun (ie saméméh slid.bs.carouselacara lumangsung).

.carousel('next')

Siklus ka item salajengna. Mulih ka nu nelepon saméméh item salajengna geus ditémbongkeun (ie saméméh slid.bs.carouselacara lumangsung).

.carousel('dispose')

Ngancurkeun carousel hiji unsur.

Kajadian

Kelas carousel Bootstrap ngungkabkeun dua acara pikeun ngaitkeun kana fungsionalitas carousel. Kadua acara gaduh sipat tambahan di handap ieu:

• direction: Arah nu carousel nu ngageser (boh "left"atawa "right").
• relatedTarget: Unsur DOM nu keur slid kana tempat salaku item aktip.
• from: Indéks item ayeuna
• to: Indéks item salajengna

Sadaya acara carousel dipecat dina carousel sorangan (ie di <div class="carousel">).

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

Robah durasi transisi

Durasi transisi .carousel-itemtiasa dirobih ku $carousel-transitionvariabel Sass sateuacan kompilasi atanapi gaya khusus upami anjeun nganggo CSS anu disusun. Upami sababaraha transisi diterapkeun, pastikeun transisi transformasi ditetepkeun heula (contona. transition: transform 2s ease, opacity .5s ease-out).