Carousel
Ohun elo agbelera fun gigun kẹkẹ nipasẹ awọn eroja — awọn aworan tabi awọn ifaworanhan ti ọrọ — bii carousel kan.
Bawo ni o ṣe n ṣiṣẹ
Carousel jẹ agbelera fun gigun kẹkẹ nipasẹ onka akoonu, ti a ṣe pẹlu awọn iyipada CSS 3D ati diẹ ninu JavaScript. O ṣiṣẹ pẹlu lẹsẹsẹ awọn aworan, ọrọ, tabi isamisi aṣa. O tun pẹlu atilẹyin fun iṣaaju / atẹle awọn idari ati awọn itọkasi.
Ninu awọn aṣawakiri nibiti API Hihan Oju -iwe ti ni atilẹyin, carousel yoo yago fun sisun nigbati oju opo wẹẹbu ko ba han si olumulo (bii nigbati taabu ẹrọ aṣawakiri ko ṣiṣẹ, window aṣawakiri ti dinku, ati bẹbẹ lọ).
prefers-reduced-motion
ibeere media. Wo
apakan išipopada ti o dinku ti iwe iraye si wa .
Jọwọ ṣe akiyesi pe awọn carousels oni ite ko ni atilẹyin, ati pe awọn carousels ni gbogbogbo ko ni ibamu pẹlu awọn iṣedede iraye si.
Apeere
Carousels ko ṣe deede awọn iwọn ifaworanhan laifọwọyi. Bi iru bẹẹ, o le nilo lati lo awọn ohun elo afikun tabi awọn aṣa aṣa lati ṣe iwọn akoonu ti o yẹ. Lakoko ti awọn carousels ṣe atilẹyin awọn idari iṣaaju / atẹle ati awọn itọkasi, wọn ko nilo ni gbangba. Ṣafikun ati ṣe akanṣe bi o ṣe rii pe o yẹ.
Kilasi .active
nilo lati fi kun si ọkan ninu awọn kikọja bibẹẹkọ carousel kii yoo han. Paapaa rii daju lati ṣeto alailẹgbẹ id
lori .carousel
fun awọn idari iyan, paapaa ti o ba nlo awọn carousels pupọ lori oju-iwe kan. Iṣakoso ati awọn eroja atọka gbọdọ ni abuda kan data-bs-target
(tabi href
fun awọn ọna asopọ) ti o baamu id
ti .carousel
nkan naa.
Awọn ifaworanhan nikan
Eyi ni carousel kan pẹlu awọn kikọja nikan. Ṣe akiyesi wiwa ti .d-block
ati .w-100
lori awọn aworan carousel lati ṣe idiwọ titete aworan aiyipada aṣawakiri.
<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>
Pẹlu awọn iṣakoso
Ṣafikun ni iṣaaju ati awọn iṣakoso atẹle. A ṣeduro lilo <button>
awọn eroja, ṣugbọn o tun le lo <a>
awọn eroja pẹlu 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>
Pẹlu awọn itọkasi
O tun le ṣafikun awọn itọka si carousel, lẹgbẹẹ awọn idari, paapaa.
<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>
Pẹlu awọn akọle
Ṣafikun awọn akọle si awọn ifaworanhan rẹ ni irọrun pẹlu .carousel-caption
eroja laarin eyikeyi .carousel-item
. Wọn le farapamọ ni irọrun lori awọn ibudo wiwo kekere, bi a ṣe han ni isalẹ, pẹlu awọn ohun elo ifihan aṣayan . A tọju wọn lakoko pẹlu .d-none
ati mu wọn pada lori awọn ẹrọ alabọde pẹlu .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
Ṣafikun .carousel-fade
si carousel rẹ si awọn ifaworanhan ere idaraya pẹlu iyipada ipare dipo ifaworanhan kan.
<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
Aarin ẹni kọọkan
Fikun data-bs-interval=""
-un lati .carousel-item
yi iye akoko pada lati ṣe idaduro laarin gigun kẹkẹ laifọwọyi si ohun kan ti o tẹle.
<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>
Pa fifọwọkan swiping
Carousels ṣe atilẹyin fifa osi/ọtun lori awọn ẹrọ iboju ifọwọkan lati gbe laarin awọn kikọja. Eyi le jẹ alaabo nipa lilo data-bs-touch
abuda naa. Apẹẹrẹ ti o wa ni isalẹ tun ko pẹlu data-bs-ride
abuda naa ati pe o ni data-bs-interval="false"
nitorina ko ṣe adaṣe adaṣe.
<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>
Iyatọ dudu
Ṣafikun .carousel-dark
si .carousel
fun awọn idari dudu, awọn afihan, ati awọn akọle. Awọn iṣakoso ti yipada lati inu funfun aiyipada wọn pẹlu filter
ohun-ini CSS. Awọn akọle ati awọn idari ni afikun awọn oniyipada Sass ti o ṣe akanṣe color
ati 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>
Aṣa iyipada
Iye akoko iyipada ti .carousel-item
le yipada pẹlu $carousel-transition-duration
oniyipada Sass ṣaaju iṣakojọpọ tabi awọn aṣa aṣa ti o ba nlo CSS ti o ṣajọ. Ti a ba lo awọn iyipada pupọ, rii daju pe iyipada iyipada jẹ asọye ni akọkọ (fun apẹẹrẹ transition: transform 2s ease, opacity .5s ease-out
).
Sass
Awọn oniyipada
$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);
Lilo
Nipasẹ awọn abuda data
Lo awọn abuda data lati ṣakoso ni irọrun ipo ti carousel. data-bs-slide
gba awọn koko-ọrọ prev
tabi next
, eyiti o paarọ ipo ifaworanhan ni ibatan si ipo lọwọlọwọ rẹ. Ni omiiran, lo data-bs-slide-to
lati kọja atọka ifaworanhan aise si carousel data-bs-slide-to="2"
, eyiti o yi ipo ifaworanhan si atọka kan pato ti o bẹrẹ pẹlu 0
.
Ẹya data-bs-ride="carousel"
naa ni a lo lati samisi carousel kan bi ere idaraya ti o bẹrẹ ni fifuye oju-iwe. Ti o ko ba lo data-bs-ride="carousel"
lati pilẹṣẹ carousel rẹ, o ni lati pilẹṣẹ rẹ funrararẹ. Ko le ṣee lo ni apapo pẹlu (laiṣe ati kobojumu) ipilẹṣẹ JavaScript ti o fojuhan ti carousel kanna.
Nipasẹ JavaScript
Pe carousel pẹlu ọwọ pẹlu:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Awọn aṣayan
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-bs-
, bi ninu data-bs-interval=""
.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
interval |
nọmba | 5000 |
Iye akoko lati ṣe idaduro laarin gigun kẹkẹ ohun kan laifọwọyi. Ti false , carousel kii yoo yipo laifọwọyi. |
keyboard |
boolian | true |
Boya carousel yẹ ki o fesi si awọn iṣẹlẹ keyboard. |
pause |
okun | boolian | 'hover' |
Ti o ba ṣeto si Lori awọn ẹrọ ti o ni ifọwọkan, nigbati o ba ṣeto si |
ride |
okun | boolian | false |
Ṣe adaṣe carousel ni adaṣe lẹhin ti olumulo fi ọwọ yi nkan akọkọ. Ti o ba ṣeto si 'carousel' , ṣe adaṣe carousel lori fifuye. |
wrap |
boolian | true |
Boya carousel yẹ ki o yipo nigbagbogbo tabi ni awọn iduro lile. |
touch |
boolian | true |
Boya carousel yẹ ki o ṣe atilẹyin awọn ibaraẹnisọrọ ra osi / ọtun lori awọn ẹrọ iboju ifọwọkan. |
Awọn ọna
Awọn ọna Asynchronous ati awọn iyipada
Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
O le ṣẹda apẹẹrẹ carousel pẹlu olupilẹṣẹ carousel, fun apẹẹrẹ, lati bẹrẹ pẹlu awọn aṣayan afikun ki o bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Ọna | Apejuwe |
---|---|
cycle |
Yiyipo nipasẹ awọn ohun carousel lati osi si otun. |
pause |
Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan. |
prev |
Awọn iyipo si nkan ti tẹlẹ. Pada si olupe ṣaaju ki ohun ti tẹlẹ ti han (fun apẹẹrẹ, ṣaaju ki slid.bs.carousel iṣẹlẹ to waye). |
next |
Awọn iyipo si nkan atẹle. Pada si olupe ṣaaju ki ohun ti o tẹle ti han (fun apẹẹrẹ, ṣaaju slid.bs.carousel iṣẹlẹ naa). |
nextWhenVisible |
Maṣe yi kẹkẹ carousel lọ si atẹle nigbati oju-iwe naa ko ba han tabi carousel tabi obi rẹ ko han. Pada si olupe ṣaaju ki o to han ohun afojusun naa |
to |
Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun). Pada si olupe ṣaaju ki ohun ibi-afẹde ti han (fun apẹẹrẹ, ṣaaju slid.bs.carousel iṣẹlẹ naa). |
dispose |
Pa carousel eroja run. (Yọ data ti o fipamọ sori nkan DOM kuro) |
getInstance |
Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ carousel ti o ni nkan ṣe pẹlu nkan DOM, o le lo bii eyi:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Ọna aimi eyiti o da apẹẹrẹ carousel pada ti o ni nkan ṣe si nkan DOM kan tabi ṣẹda ọkan tuntun ti ko ba ṣe ipilẹṣẹ. O le lo bi eleyi:bootstrap.Carousel.getOrCreateInstance(element) |
Awọn iṣẹlẹ
Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel. Awọn iṣẹlẹ mejeeji ni awọn ohun-ini afikun wọnyi:
direction
: Awọn itọsọna ninu eyi ti awọn carousel ti wa ni sisun (boya"left"
tabi"right"
).relatedTarget
: Eroja DOM ti o wa ni slid sinu aaye bi ohun ti nṣiṣe lọwọ.from
: Atọka ti nkan lọwọlọwọto
: Atọka ti nkan atẹle
Gbogbo awọn iṣẹlẹ carousel jẹ ina si carousel funrararẹ (ie ni <div class="carousel">
).
Iru iṣẹlẹ | Apejuwe |
---|---|
slide.bs.carousel |
Ina lẹsẹkẹsẹ nigbati ọna slide apẹẹrẹ ba pe. |
slid.bs.carousel |
Ti ṣiṣẹ nigbati carousel ti pari iyipada ifaworanhan rẹ. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})