Carousel
Isang bahagi ng slideshow para sa pagbibisikleta sa mga elemento—mga larawan o mga slide ng text—tulad ng isang carousel.
Paano ito gumagana
Ang carousel ay isang slideshow para sa pagbibisikleta sa isang serye ng content, na binuo gamit ang CSS 3D transforms at kaunting JavaScript. Gumagana ito sa isang serye ng mga larawan, teksto, o custom na markup. Kasama rin dito ang suporta para sa mga nauna/susunod na kontrol at indicator.
Sa mga browser kung saan sinusuportahan ang Page Visibility API , maiiwasan ng carousel ang pag-slide kapag hindi nakikita ng user ang webpage (gaya ng kapag hindi aktibo ang tab ng browser, pinaliit ang window ng browser, atbp.).
prefers-reduced-motion
query ng media. Tingnan ang
seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .
Pakitandaan na ang mga nested carousel ay hindi sinusuportahan, at ang mga carousel ay karaniwang hindi sumusunod sa mga pamantayan ng accessibility.
Halimbawa
Hindi awtomatikong ginagawang normal ng mga carousel ang mga sukat ng slide. Dahil dito, maaaring kailanganin mong gumamit ng mga karagdagang kagamitan o mga custom na istilo sa naaangkop na laki ng nilalaman. Bagama't sinusuportahan ng mga carousel ang nakaraan/susunod na mga kontrol at tagapagpahiwatig, hindi ito tahasang kinakailangan. Magdagdag at mag-customize ayon sa nakikita mong angkop.
Kailangang idagdag ang .active
klase sa isa sa mga slide kung hindi ay hindi makikita ang carousel. Tiyaking magtakda din ng natatangi id
sa .carousel
para sa mga opsyonal na kontrol, lalo na kung gumagamit ka ng maraming carousel sa iisang page. Ang mga elemento ng kontrol at tagapagpahiwatig ay dapat may data-bs-target
katangian (o href
para sa mga link) na tumutugma id
sa .carousel
elemento.
Mga slide lang
Narito ang isang carousel na may mga slide lang. Tandaan ang presensya ng .d-block
at .w-100
sa mga carousel na larawan upang maiwasan ang default na pagkakahanay ng imahe ng 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>
Na may mga kontrol
Pagdaragdag sa nakaraan at susunod na mga kontrol. Inirerekomenda namin ang paggamit <button>
ng mga elemento, ngunit maaari mo ring gamitin <a>
ang mga elemento na may 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>
Sa mga tagapagpahiwatig
Maaari mo ring idagdag ang mga indicator sa carousel, kasama ng mga kontrol, din.
<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>
May mga caption
Magdagdag ng mga caption sa iyong mga slide nang madali gamit ang .carousel-caption
elemento sa loob ng anumang .carousel-item
. Madaling maitago ang mga ito sa mas maliliit na viewport, tulad ng ipinapakita sa ibaba, na may mga opsyonal na kagamitan sa pagpapakita . Itinago namin ang mga ito sa simula .d-none
at ibinabalik ang mga ito sa mga medium-sized na device na may .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
Idagdag .carousel-fade
sa iyong carousel para i-animate ang mga slide na may fade transition sa halip na 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>
Indibidwal na .carousel-item
pagitan
Idagdag data-bs-interval=""
sa isang .carousel-item
upang baguhin ang tagal ng oras upang maantala sa pagitan ng awtomatikong pagbibisikleta sa susunod na item.
<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>
I-disable ang touch swiping
Sinusuportahan ng mga carousel ang pag-swipe pakaliwa/pakanan sa mga touchscreen na device upang lumipat sa pagitan ng mga slide. Maaari itong i-disable gamit ang data-bs-touch
attribute. Ang halimbawa sa ibaba ay hindi rin kasama ang data-bs-ride
katangian at mayroon data-bs-interval="false"
kaya hindi ito nag-autoplay.
<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>
Madilim na variant
Idagdag .carousel-dark
sa .carousel
para sa mas madidilim na kontrol, indicator, at caption. Ang mga kontrol ay na-invert mula sa kanilang default na puting fill na may filter
CSS property. Ang mga caption at kontrol ay may mga karagdagang Sass variable na nagko-customize ng color
at 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>
Pasadyang paglipat
Maaaring baguhin ang tagal ng transition .carousel-item
ng $carousel-transition-duration
Sass bago mag-compile o mga custom na istilo kung ginagamit mo ang pinagsama-samang CSS. Kung maraming transition ang inilapat, siguraduhing ang transisyon ng pagbabago ay unang tinukoy (hal. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Mga variable
$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);
Paggamit
Sa pamamagitan ng mga katangian ng data
Gumamit ng mga attribute ng data para madaling makontrol ang posisyon ng carousel. data-bs-slide
tumatanggap ng mga keyword prev
o next
, na nagbabago sa posisyon ng slide na nauugnay sa kasalukuyang posisyon nito. Bilang kahalili, gamitin data-bs-slide-to
upang ipasa ang isang raw slide index sa carousel data-bs-slide-to="2"
, na naglilipat sa posisyon ng slide sa isang partikular na index na nagsisimula sa 0
.
Ginagamit ang data-bs-ride="carousel"
attribute para markahan ang isang carousel bilang animating simula sa pag-load ng page. Kung hindi mo ginagamit data-bs-ride="carousel"
upang simulan ang iyong carousel, kailangan mo itong simulan mismo. Hindi ito maaaring gamitin sa kumbinasyon ng (kalabisan at hindi kailangan) tahasang pagsisimula ng JavaScript ng parehong carousel.
Sa pamamagitan ng JavaScript
Manu-manong tumawag sa carousel gamit ang:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Mga pagpipilian
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-bs-
, tulad ng sa data-bs-interval=""
.
Pangalan | Uri | Default | Paglalarawan |
---|---|---|---|
interval |
numero | 5000 |
Ang tagal ng oras upang maantala sa pagitan ng awtomatikong pagbibisikleta ng isang item. Kung false , hindi awtomatikong iikot ang carousel. |
keyboard |
boolean | true |
Kung dapat tumugon ang carousel sa mga kaganapan sa keyboard. |
pause |
string | boolean | 'hover' |
Kung nakatakda sa Sa mga touch-enabled na device, kapag nakatakda sa |
ride |
string | boolean | false |
I-autoplay ang carousel pagkatapos manu-manong iikot ng user ang unang item. Kung nakatakda sa 'carousel' , i-autoplay ang carousel sa pagkarga. |
wrap |
boolean | true |
Kung ang carousel ay dapat na tuluy-tuloy na umiikot o may matitigas na paghinto. |
touch |
boolean | true |
Kung dapat suportahan ng carousel ang mga pakikipag-ugnayan sa kaliwa/kanan na pag-swipe sa mga touchscreen na device. |
Paraan
Mga asynchronous na pamamaraan at paglipat
Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .
Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .
Maaari kang lumikha ng isang instance ng carousel gamit ang carousel constructor, halimbawa, upang magsimula sa mga karagdagang opsyon at magsimulang magbisikleta sa mga item:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Pamamaraan | Paglalarawan |
---|---|
cycle |
Umiikot sa mga carousel item mula kaliwa hanggang kanan. |
pause |
Pinipigilan ang carousel mula sa pagbibisikleta sa mga item. |
prev |
Ikot sa nakaraang item. Bumabalik sa tumatawag bago naipakita ang nakaraang item (hal., bago slid.bs.carousel mangyari ang kaganapan). |
next |
Ikot sa susunod na item. Bumabalik sa tumatawag bago naipakita ang susunod na item (hal., bago slid.bs.carousel mangyari ang kaganapan). |
nextWhenVisible |
Huwag iikot ang carousel sa susunod kapag hindi nakikita ang page o hindi nakikita ang carousel o ang magulang nito. Bumabalik sa tumatawag bago naipakita ang target na item |
to |
Iniikot ang carousel sa isang partikular na frame (batay sa 0, katulad ng isang array). Bumabalik sa tumatawag bago naipakita ang target na item (hal., bago slid.bs.carousel mangyari ang kaganapan). |
dispose |
Sinisira ang carousel ng isang elemento. (Aalisin ang nakaimbak na data sa elemento ng DOM) |
getInstance |
Static na paraan na nagbibigay-daan sa iyong makuha ang instance ng carousel na nauugnay sa isang elemento ng DOM, maaari mo itong gamitin tulad nito:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Static na paraan na nagbabalik ng instance ng carousel na nauugnay sa isang elemento ng DOM o gumagawa ng bago kung sakaling hindi ito nasimulan. Maaari mo itong gamitin tulad nito:bootstrap.Carousel.getOrCreateInstance(element) |
Mga kaganapan
Ang klase ng carousel ng Bootstrap ay naglalantad ng dalawang kaganapan para sa pag-hook sa pagpapagana ng carousel. Ang parehong mga kaganapan ay may mga sumusunod na karagdagang katangian:
direction
: Ang direksyon kung saan dumudulas ang carousel (alinman"left"
o"right"
).relatedTarget
: Ang elemento ng DOM na ini-slide sa lugar bilang aktibong item.from
: Ang index ng kasalukuyang itemto
: Ang index ng susunod na item
Ang lahat ng mga kaganapan sa carousel ay pinaputok sa mismong carousel (ibig sabihin, sa <div class="carousel">
).
Uri ng kaganapan | Paglalarawan |
---|---|
slide.bs.carousel |
Gumagana kaagad kapag slide ginamit ang paraan ng instance. |
slid.bs.carousel |
Pinaputok kapag natapos na ng carousel ang paglipat ng slide nito. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})