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.).
prefers-reduced-motion
pitakon media. Deleng
bagean gerakan suda saka dokumentasi aksesibilitas kita .
Elinga yen carousel bersarang ora didhukung, lan carousel umume ora tundhuk karo standar aksesibilitas.
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 .active
kasebut kudu ditambahake menyang salah sawijining slide , yen ora, carousel ora bakal katon. Uga manawa kanggo nyetel unik id
ing .carousel
kanggo kontrol opsional, utamané yen sampeyan nggunakake macem-macem carousels ing kaca siji. Unsur kontrol lan indikator kudu nduweni data-bs-target
atribut (utawa href
kanggo pranala) sing cocog id
karo .carousel
unsur kasebut.
Mung geser
Iki carousel mung karo slide. Elinga anane gambar carousel .d-block
lan .w-100
ing kanggo nyegah keselarasan gambar standar browser.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Kanthi indikator
Sampeyan uga bisa nambah pratondho menyang carousel, bebarengan karo kontrol uga.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Kanthi caption
Tambah katrangan menyang slide kanthi gampang karo .carousel-caption
unsur 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-none
lan nggawa maneh ing piranti ukuran medium kanthi .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Crossfade
Tambah .carousel-fade
menyang carousel kanggo nguripake slide kanthi transisi fade tinimbang slide.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
.carousel-item
Interval individu
Tambah data-bs-interval=""
menyang .carousel-item
kanggo ngganti jumlah wektu tundha antarane otomatis muter kanggo item sabanjuré.
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">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-bs-touch
atribut. Conto ing ngisor iki uga ora kalebu data-bs-ride
atribut lan data-bs-interval="false"
ora muter otomatis.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Varian peteng
Tambahake .carousel-dark
menyang .carousel
kontrol, indikator, lan caption sing luwih peteng. Kontrol wis diwalik saka isi putih standar karo filter
properti CSS. Katrangan lan kontrol duwe variabel Sass tambahan sing ngatur color
lan background-color
.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<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" data-bs-interval="2000">
<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-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Transisi khusus
Durasi transisi .carousel-item
bisa diganti karo $carousel-transition-duration
variabel 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
).
Sass
Variabel
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Panggunaan
Liwat atribut data
Gunakake atribut data kanggo gampang ngontrol posisi carousel. data-bs-slide
nampa tembung kunci prev
utawa next
, sing ngowahi posisi geser relatif marang posisi saiki. Utawa, gunakake data-bs-slide-to
kanggo ngirim indeks geser mentah menyang carousel data-bs-slide-to="2"
, sing ngganti posisi geser menyang indeks tartamtu sing diwiwiti karo 0
.
Atribut data-bs-ride="carousel"
digunakake kanggo menehi tandha carousel minangka animasi wiwit mbukak kaca. Yen sampeyan ora nggunakake data-bs-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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Pilihan
Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-bs-
, kaya ing data-bs-interval=""
.
jeneng | Jinis | Default | Katrangan |
---|---|---|---|
interval |
nomer | 5000 |
Jumlah wektu tundha antarane muter kanthi otomatis item. Yen false , carousel ora bakal otomatis muter. |
keyboard |
boolean | true |
Apa carousel kudu nanggepi acara keyboard. |
pause |
senar | boolean | 'hover' |
Yen disetel menyang Ing piranti sing aktif tutul, yen disetel menyang |
ride |
senar | boolean | false |
Muter otomatis carousel sawise pangguna kanthi manual siklus item pisanan. Yen disetel kanggo 'carousel' , autoplays carousel ing mbukak. |
wrap |
boolean | true |
Apa carousel kudu muter terus-terusan utawa kudu mandheg. |
touch |
boolean | true |
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 .
Sampeyan bisa nggawe conto carousel karo konstruktor carousel, contone, kanggo miwiti karo opsi tambahan lan miwiti muter liwat item:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metode | Katrangan |
---|---|
cycle |
Siklus liwat item carousel saka kiwa menyang tengen. |
pause |
Mungkasi carousel saka muter liwat item. |
prev |
Siklus menyang item sadurunge. Bali menyang panelpon sadurunge item sadurunge wis ditampilake (contone, sadurunge slid.bs.carousel acara kedaden). |
next |
Siklus menyang item sabanjure. Bali menyang panelpon sadurunge item sabanjure ditampilake (contone, sadurunge slid.bs.carousel acara kasebut kedadeyan). |
nextWhenVisible |
Aja nguri-uri carousel menyang sabanjure nalika kaca ora katon utawa carousel utawa induke ora katon. Bali menyang panelpon sadurunge item target wis ditampilake |
to |
Siklus carousel menyang pigura tartamtu (basis 0, padha karo array). Bali menyang panelpon sadurunge item target wis ditampilake (contone, sadurunge slid.bs.carousel acara kedaden). |
dispose |
Ngancurake carousel unsur. (Mbusak data sing disimpen ing unsur DOM) |
getInstance |
Cara statis sing ngidini sampeyan entuk conto carousel sing ana gandhengane karo unsur DOM, sampeyan bisa nggunakake kaya iki:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Cara statis sing ngasilake conto carousel sing digandhengake karo unsur DOM utawa nggawe sing anyar yen ora diwiwiti. Sampeyan bisa nggunakake kaya iki:bootstrap.Carousel.getOrCreateInstance(element) |
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 saikito
: Indeks item sabanjure
Kabeh acara carousel dipecat ing carousel dhewe (yaiku ing <div class="carousel">
).
Jenis acara | Katrangan |
---|---|
slide.bs.carousel |
Langsung murub nalika slide cara conto dijaluk. |
slid.bs.carousel |
Dipecat nalika carousel wis rampung transisi geser. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})