Carousel
Komponén pintonan slaid pikeun ngurilingan elemen—gambar atanapi slide téks—sapertos carousel.
Kumaha gawéna
Carousel nyaéta pintonan slaid pikeun ngurilingan runtuyan eusi, diwangun ku CSS 3D transforms sarta saeutik 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.).
prefers-reduced-motion
pamundut média. Tempo
bagian gerak ngurangan tina dokuméntasi aksés kami .
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 .active
kudu ditambahkeun kana salah sahiji slides disebutkeun carousel moal katingali. Ogé pastikeun pikeun nyetel hiji unik id
dina .carousel
pikeun kadali pilihan, utamana lamun nuju ngagunakeun sababaraha carousels dina hiji kaca. Unsur kontrol sareng indikator kedah gaduh data-target
atribut (atanapi href
kanggo tautan) anu cocog id
sareng .carousel
unsur.
Ngageser wungkul
Ieu carousel kalayan slide wungkul. Catet ayana gambar carousel .d-block
sareng .w-100
on 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 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>
Kalawan kadali
Nambahkeun dina kadali saméméhna jeung saterusna. Kami ngarékoméndasikeun ngagunakeun <button>
elemen, Tapi anjeun oge bisa make <a>
elemen kalawan 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>
Kalayan indikator
Anjeun ogé tiasa nambihan indikator kana carousel, sareng kadali ogé.
<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>
Kalayan caption
Tambihkeun caption kana slide anjeun kalayan gampang kalayan .carousel-caption
unsur 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-none
jeung mawa eta deui dina alat-ukuran sedeng jeung .d-md-block
.
<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
Tambihkeun .carousel-fade
kana carousel anjeun pikeun ngahirupkeun slide kalayan transisi luntur tibatan slide. Gumantung kana eusi carousel anjeun (misalna téks ngan slides), Anjeun meureun hoyong tambahkeun .bg-body
atawa sababaraha CSS custom ka .carousel-item
s pikeun crossfading ditangtoskeun.
<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
Tambahkeun data-interval=""
ka a .carousel-item
ngarobah jumlah waktu reureuh antara otomatis Ngabuburit ka item salajengna.
<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>
Nonaktipkeun touch swiping
Carousels ngarojong swiping ka kenca/katuhu dina alat layar rampa pikeun mindahkeun antara slides. Ieu tiasa ditumpurkeun nganggo data-touch
atribut. Conto di handap ieu ogé teu kaasup data-ride
atribut jeung boga data-interval="false"
sangkan teu autoplay.
<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>
Pamakéan
Via atribut data
Paké atribut data pikeun gampang ngadalikeun posisi carousel nu. data-slide
narima kecap konci prev
atawa next
, nu ngarobah posisi slide relatif ka posisi ayeuna. Alternatipna, pake data-slide-to
pikeun ngalirkeun indéks slide atah ka carousel data-slide-to="2"
, nu shifts posisi slide ka indéks husus dimimitian ku 0
.
Atribut data-ride="carousel"
ieu dianggo pikeun nandaan carousel salaku animasi dimimitian dina beban halaman. Upami anjeun henteu nganggo data-ride="carousel"
pikeun ngamimitian carousel anjeun, anjeun kedah ngamimitian nyalira. Ieu teu bisa dipaké dina kombinasi kalayan (kaleuleuwihan sarta 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=""
.
Ngaran | Tipe | Default | Katerangan |
---|---|---|---|
interval | angka | 5000 | Jumlah waktu reureuh antara otomatis Ngabuburit hiji item. Lamun false , carousel moal otomatis siklus. |
kibor | boolean | leres | Naha carousel kedah ngaréspon kana acara keyboard. |
reureuh sakeudeung | string | boolean | 'ngalayang' | Lamun disetel ka Dina alat-alat touch-diaktipkeun, lamun disetel ka |
numpak | senar | palsu | Autoplays carousel sanggeus pamaké sacara manual siklus item kahiji. Upami disetel ka 'carousel' , autoplays carousel on beban. |
bungkus | boolean | leres | Naha carousel kedah ngurilingan kontinyu atanapi kedah eureun. |
keuna | boolean | leres | Naha carousel kedah ngadukung interaksi gesek kenca/katuhu dina alat layar rampa. |
Métode
Métode Asynchronous sareng transisi
Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .
Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .
.carousel(options)
Initializes carousel kalawan pilihan pilihan object
tur 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.carousel
acara 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.carousel
acara 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.carousel
acara lumangsung).
.carousel('dispose')
Ngancurkeun carousel hiji unsur.
.carousel('nextWhenVisible')
Entong siklus carousel ka hareup nalika halaman henteu katingali atanapi carousel atanapi indungna henteu katingali. Mulih ka nu nelepon saméméh item salajengna geus ditémbongkeun (ie saméméh slid.bs.carousel
acara lumangsung).
.carousel('to')
Siklus carousel kana pigura nu tangtu (0 dumasar, sarupa hiji Asép Sunandar Sunarya). Mulih ka nu nelepon saméméh item salajengna geus ditémbongkeun (ie saméméh slid.bs.carousel
acara lumangsung).
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 ayeunato
: Indéks item salajengna
Sadaya acara carousel dipecat dina carousel sorangan (ie di <div class="carousel">
).
Jenis Acara | Katerangan |
---|---|
slide.bs.carousel | Kajadian ieu langsung hurung nalika slide metodeu invoked. |
slid.bs.carousel | Acara ieu dipecat nalika carousel parantos réngsé transisi slide na. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Robah durasi transisi
Durasi transisi .carousel-item
tiasa dirobih ku $carousel-transition
variabel 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
).