Carousel
Singa sary mihetsika ho an'ny mandeha bisikileta amin'ny singa — sary na horonan-tsary — toy ny carousel.
Ahoana ny fiasan'izany
Ny carousel dia sary mihetsika ho an'ny bisikileta amin'ny alàlan'ny votoaty maromaro, namboarina miaraka amin'ny fanovana CSS 3D sy JavaScript kely. Izy io dia miasa miaraka amin'ny andian-tsary, lahatsoratra, na marika manokana. Tafiditra ao anatin'izany koa ny fanohanana ireo fanaraha-maso sy tondro teo aloha/manaraka.
Ao amin'ny mpitety izay manohana ny Page Visibility API , ny carousel dia tsy hivezivezy rehefa tsy hitan'ny mpampiasa ny pejin-tranonkala (toy ny rehefa tsy miasa ny tabilao navigateur, mihena ny varavarankelin'ny navigateur, sns.).
prefers-reduced-motion
fangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny
fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .
Azafady, tandremo fa tsy tohanana ny carousels misy akany, ary tsy mifanaraka amin'ny fenitry ny fidirana amin'ny ankapobeny ny carousels.
OHATRA
Ny carousels dia tsy manara-penitra ho azy ny refin'ny slide. Noho izany, mety mila mampiasa fitaovana fanampiny na fomba fanao mahazatra ianao mba hamehezana ny atiny. Na dia manohana ny fanaraha-maso sy ny tondro teo aloha/manaraka aza ny carousels, dia tsy takiana mazava. Ampio sy amboary araka izay hitanao fa mety.
Ny .active
kilasy dia mila ampiana amin'ny iray amin'ireo slides raha tsy izany dia tsy ho hita ny carousel. Aza hadino ihany koa ny mametraka tsy manam-paharoa id
amin'ny .carousel
fanaraha-maso azo atao, indrindra raha mampiasa carousels maromaro amin'ny pejy tokana ianao. Ny singa fanaraha-maso sy famantarana dia tsy maintsy manana data-bs-target
toetra (na href
ho an'ny rohy) mifanaraka id
amin'ny .carousel
singa.
Slides ihany
Ity misy carousel misy slide ihany. Mariho ny fisian'ny sary carousel .d-block
sy .w-100
amin'ny carousel mba hisorohana ny fampifanarahana ny sary default amin'ny navigateur.
<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>
Miaraka amin'ny fanaraha-maso
Manampy amin'ny fanaraha-maso teo aloha sy manaraka. Manoro hevitra izahay hampiasa <button>
singa, fa afaka mampiasa <a>
singa miaraka amin'ny 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>
Miaraka amin'ny famantarana
Azonao atao koa ny manampy ny tondro amin'ny carousel, miaraka amin'ny fanaraha-maso ihany koa.
<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>
Miaraka amin'ny lohateny
Ampio caption amin'ny slide-nao mora foana miaraka amin'ny .carousel-caption
singa ao anatin'ny .carousel-item
. Azo afenina mora foana amin'ny seranana kely kokoa izy ireo, araka ny aseho etsy ambany, miaraka amin'ny fitaovana fampirantiana azo atao . Afeninay amin'ny voalohany izy ireo .d-none
ary averinay amin'ny fitaovana antonony miaraka amin'ny .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
Ampio .carousel-fade
ao amin'ny carousel-nao mba hampihetsi-po ny slides miaraka amin'ny fifindrana manjavona fa tsy 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
Ela-ela tsirairay
Ampio data-bs-interval=""
ny a .carousel-item
hanovana ny fotoana hanemorana eo anelanelan'ny fandehanana mandeha ho azy mankany amin'ny singa manaraka.
<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>
Atsaharo ny fikapohana mikasika
Ny carousels dia manohana ny fikosehana miankavia / miankavanana amin'ny fitaovana efijery kitihina mba hivezivezena eo anelanelan'ny sary. Izany dia mety ho kilemaina amin'ny fampiasana ny data-bs-touch
toetra. Ny ohatra etsy ambany koa dia tsy ahitana ny data-bs-ride
toetra ary manana data-bs-interval="false"
izany tsy mandeha ho azy.
<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>
Variant maizina
Ampio .carousel-dark
ao amin'ny .carousel
ho an'ny fanaraha-maso maizina, tondro ary lohateny. Ny fanaraha-maso dia navadika avy amin'ny famenoana fotsy mahazatra miaraka amin'ny filter
fananana CSS. Ny dikan-teny sy ny fanaraha-maso dia manana fari-pahalalana Sass fanampiny izay mampifanaraka ny color
sy 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>
Tetezamita manokana
Ny faharetan'ny tetezamita .carousel-item
dia azo ovaina miaraka amin'ny $carousel-transition-duration
fari-piadidiana Sass alohan'ny hanangonana na fomba fanao mahazatra raha mampiasa ny CSS natambatra ianao. Raha tetezana maromaro no ampiharina, ataovy azo antoka fa voafaritra aloha ny fiovan'ny fiovana (oh. transition: transform 2s ease, opacity .5s ease-out
).
Sass
hiovaova
$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);
Fampiasana
Amin'ny alàlan'ny data attributes
Mampiasà toetra angona mba hifehezana mora foana ny toerana misy ny carousel. data-bs-slide
manaiky ny teny fanalahidy prev
na next
, izay manova ny toeran'ny slide mifandraika amin'ny toerana misy azy ankehitriny. Raha tsy izany, ampiasao data-bs-slide-to
ny fampitaovana fanondroana misesy manta mankany amin'ny carousel data-bs-slide-to="2"
, izay mamindra ny toeran'ny kisendrasendra mankany amina fanondroana manokana manomboka amin'ny 0
.
Ny data-bs-ride="carousel"
toetra dia ampiasaina hanamarihana carousel ho toy ny animating manomboka amin'ny entana pejy. Raha tsy mampiasa data-bs-ride="carousel"
ny carousel ianao, dia tsy maintsy ataonao voalohany izany. Tsy azo ampiasaina miaraka amin'ny fanombohana JavaScript mibaribary (mihemotra sy tsy ilaina) amin'ny carousel mitovy.
Amin'ny JavaScript
Antsoy amin'ny tanana ny carousel amin'ny:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
FANDIKANA
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-
, toy ny ao amin'ny data-bs-interval=""
.
Anarana | Type | toerana misy anao | Description |
---|---|---|---|
interval |
isa | 5000 |
Ny faharetan'ny fotoana eo anelanelan'ny fandehanana mandeha ho azy amin'ny zavatra iray. Raha false , dia tsy mandeha ho azy ny carousel. |
keyboard |
boolean | true |
Na tokony hihetsika amin'ny hetsika fitendry ny carousel. |
pause |
string | boolean | 'hover' |
Raha apetraka amin'ny Amin'ny fitaovana azo fikasihana, rehefa apetraka amin'ny |
ride |
string | boolean | false |
Alefao mandeha ho azy ny carousel rehefa avy manodina ny entana voalohany ny mpampiasa. Raha apetraka amin'ny 'carousel' , dia alefa mandeha ho azy ny carousel amin'ny entana. |
wrap |
boolean | true |
Na tokony hivezivezy tsy tapaka ny carousel na hisy fiatoana mafy. |
touch |
boolean | true |
Na ny carousel dia tokony hanohana ny fifampikasohana miankavia/ankavanana amin'ny fitaovana ecran touchy. |
fomba
Fomba sy fifindrana asynchronous
Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .
Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .
Azonao atao ny mamorona ohatra amin'ny carousel miaraka amin'ny mpanamboatra carousel, ohatra, hanombohana amin'ny safidy fanampiny ary manomboka mandehandeha amin'ny zavatra:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
FOMBA | Description |
---|---|
cycle |
Mihodikodina amin'ireo singa carousel miankavia miankavanana. |
pause |
Manakana ny carousel tsy hivezivezy amin'ny entana. |
prev |
Mihodina mankany amin'ny singa teo aloha. Miverina any amin'ny mpiantso alohan'ny hisehoan'ilay singa teo aloha (oh: alohan'ny slid.bs.carousel nitrangan'ny hetsika). |
next |
Mihodina mankany amin'ny singa manaraka. Miverina amin'ny mpiantso alohan'ny hisehoan'ny singa manaraka (oh: alohan'ny slid.bs.carousel nitrangan'ny hetsika). |
nextWhenVisible |
Aza mivezivezy amin'ny carousel manaraka rehefa tsy hita ny pejy na tsy hita ny carousel na ny ray aman-dreniny. Miverina amin'ny mpiantso alohan'ny hisehoan'ny zavatra kendrena |
to |
Mihodina ny carousel mankany amin'ny frame manokana (mifototra amin'ny 0, mitovy amin'ny array). Miverina any amin'ny mpiantso alohan'ny hisehoan'ny zavatra kendrena (oh: alohan'ny slid.bs.carousel nitrangan'ny hetsika). |
dispose |
Manimba ny carousel an'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM) |
getInstance |
Fomba static izay ahafahanao mahazo ny ohatra carousel mifandray amin'ny singa DOM, azonao ampiasaina toy izao:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Fomba static izay mamerina ohatra carousel mifandray amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao atao ny mampiasa azy toy izao:bootstrap.Carousel.getOrCreateInstance(element) |
zava-mitranga
Ny kilasin'ny carousel an'ny Bootstrap dia mampiseho fisehoan-javatra roa ho an'ny fampidiran-dresaka amin'ny fiasa carousel. Samy manana ireto toetra fanampiny ireto ny hetsika roa:
direction
: Lalana mikoriana ny carousel (na"left"
na"right"
).relatedTarget
: Ny singa DOM izay apetraka amin'ny toerany ho singa mavitrika.from
: Fanondroan'ny zavatra ankehitrinyto
: Tondron'ny zavatra manaraka
Ny hetsika carousel rehetra dia alefa amin'ny carousel mihitsy (izany hoe ao amin'ny <div class="carousel">
).
Karazana hetsika | Description |
---|---|
slide.bs.carousel |
Mirehitra avy hatrany rehefa ampiasaina ny slide fomba ohatra. |
slid.bs.carousel |
Voaroaka rehefa nahavita ny fifindran'ny diany ny carousel. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})