Carrousel oyo ezali
Eteni ya kolakisa diaporama mpo na kotambola na velo na kati ya biloko —bililingi to diapositive ya makomi —lokola carrousel.
Ndenge oyo esalaka
Carrousel ezali diaporama mpo na kosala cyclisme na nzela ya série ya contenus, etongami na ba transformations CSS 3D mpe mwa JavaScript. Esalaka na molɔngɔ́ ya bililingi, makomi, to bilembo oyo esalemi na kolanda bamposa ya moto. Ezali pe na lisungi ya ba contrôles ya kala/ya sima pe ba indicateurs.
Na ba navigateurs esika API ya Visibilité ya Lokasa esungami, carrousel ekoboya ko glisser tango page web ezali komonana te na mosaleli (lokola tango onglet ya navigateur ezali inactif, fenêtre ya navigateur ezali minimisé, etc.).
prefers-reduced-motion
requête ya média. Tala
eteni ya mouvement réduit ya mikanda na biso ya accessibilité .
Svp yeba ete ba carrousels encastrés esungami te, mpe ba carrousels ezali généralement na boyokani te na ba normes ya accessibilité.
Ndakisa
Ba carousels e normaliser automatiquement ba dimensions ya diapositive te. Lokola ezali bongo, ekoki kozala ete osengeli kosalela ba utilitaires mosusu to ba styles personnalisés mpo na kopesa bonene ya makambo oyo ebongi. Alors que ba carrousels ezo soutenir ba contrôles ya kala/ya sima pe ba indicateurs, esengeli te explicitement. Bakisa mpe salá yango ndenge omoni ete ebongi.
Esengeli .active
kobakisa kelasi na moko ya ba diapositives soki te carousel ekozala komonana te. Lisusu sala makasi ya kotya unique id
na .carousel
mpo na ba contrôles optionnels, surtout soki ozali kosalela ba carousels ebele na page moko. Ba éléments ya contrôle na indicateur esengeli ezala na data-bs-target
attribut (to href
pona ba liens) oyo ekokani na id
ya .carousel
élément.
Ba diapositives kaka
Tala carousel na ba diapositives kaka. Yeba présence ya .d-block
mpe .w-100
na bilili ya carrousel mpo na kopekisa alignment ya bilili ya navigateur par défaut.
<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 ba contrôles
Kobakisa na ba contrôles ya liboso mpe oyo elandi. Tosengi kosalela <button>
ba éléments, kasi okoki pe kosalela <a>
ba éléments na 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>
Na ba indicateurs
Okoki pe kobakisa ba indicateurs na carrousel, pembeni ya ba contrôles, pe.
<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>
Na ba captions
Bakisa ba captions na ba diapositives na yo facilement na .carousel-caption
élément na kati ya nionso .carousel-item
. Bakoki kobomba yango kozanga mpasi na bisika ya kotala ya mikemike, ndenge emonisami awa na nse, na ba utilitaires ya kolakisa oyo okoki kopona . Tobombaka bango na ebandeli na .d-none
mpe tozongisaka yango na baaparɛyi ya monene na .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 ya kosala
Bakisa .carousel-fade
na carousel na yo mpo na ko animer ba diapositives na transition ya fade na esika ya diapositive.
<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
Intervalle ya moto na moto
Bakisa data-bs-interval=""
na a .carousel-item
mpo na kobongola ntango ya kozongisa nsima kati na kokende na velo na ndenge ya automatique na eloko oyo elandi.
<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>
Désactiver ko toucher swiping
Ba carousels esalisaka ko swiping gauche/droite na ba appareils tactile pona ko tambola entre ba diapositives. Yango ekoki kozala désactivé na kosalelaka data-bs-touch
attribut. Ndakisa oyo ezali awa na se ezali mpe na data-bs-ride
attribut te mpe ezali data-bs-interval="false"
na yango mpo esala autoplay te.
<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>
Variante ya molili
Bakisa .carousel-dark
na .carousel
mpo na ba contrôles ya molili, ba indicateurs, mpe ba captions. Ba contrôles e inversé na remplissage na bango ya pembe par défaut na filter
propriété CSS. Ba captions na ba contrôles ezali na ba variables ya Sass ya kobakisa oyo e personnaliser ba color
na 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>
Transition ya momesano
Durée ya transition ya .carousel-item
ekoki ko changer na $carousel-transition-duration
variable Sass avant ya compilation to ba styles personnalisés soki ozali kosalela CSS compilé. Soki ba transitions ebele esalelami, sala que transition ya transformation e définir liboso (ndakisa transition: transform 2s ease, opacity .5s ease-out
).
Sass oyo azali
Ba variables oyo ezali
$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);
Kosalela yango
Na nzela ya ba attributs ya ba données
Salelá ba attributs ya ba données mpo na ko contrôler facilement position ya carrousel. data-bs-slide
endimaka maloba ya ntina prev
to next
, oyo ebongoli esika ya diapositive na kotalela esika oyo ezali sikoyo. Na lolenge mosusu, salelá data-bs-slide-to
mpo na koleka index ya diapositive brut na carousel data-bs-slide-to="2"
, oyo ebongoli esika ya diapositive na index moko boye oyo ebandi na 0
.
Attribut data-bs-ride="carousel"
esalelamaka mpo na kotya elembo na carousel lokola animateur kobanda na chargement ya lokasa. Soki osalelaka te data-bs-ride="carousel"
pona ko initialiser carousel na yo, il faut o initialiser yango yo moko. Ekoki kosalelama te elongo na (redundante mpe oyo ezali na ntina te) initialisation explicite ya JavaScript ya carousel moko.
Na nzela ya JavaScript
Benga carousel na maboko na:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Makambo oyo okoki kopona
Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-bs-
, lokola na data-bs-interval=""
.
Nkombo | Lolenge | Mbeba | Ndimbola |
---|---|---|---|
interval |
nimero | 5000 |
Motango ya ntango oyo esengeli kozongisa nsima kati na kotambola na velo na eloko moko na ndenge ya automatique. Soki false , carrousel ekosala cycle automatiquement te. |
keyboard |
boolean | true |
Soki carousel esengeli e réagir na ba événements ya clavier. |
pause |
molongo ya molongo | boolean | 'hover' |
Soki otie yango na Na ba appareils oyo ekoki ko toucher, soki otie yango na |
ride |
molongo ya molongo | boolean | false |
Ezo jouer automatiquement carrusel sima ya usager ko cycler manuellement eloko ya liboso. Soki otye yango na 'carousel' , ekobeta yango moko carousel na chargement. |
wrap |
boolean | true |
Ezala carrousel esengeli kosala cycle continuellement to kozala na ba arrêts ya makasi. |
touch |
boolean | true |
Soki carrousel esengeli ko soutenir ba interactions ya swipe gauche/droite na ba appareils ya écran tactile. |
Ba méthodes ya kosala
Ba méthodes asynchrones na ba transitions
Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .
Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .
Okoki kosala instance ya carrousel na constructeur ya carrousel, ndakisa, mpo na ko initialiser na ba options ya kobakisa mpe kobanda kosala cycle na nzela ya biloko:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metode | Ndimbola |
---|---|
cycle |
Ezali kosala cycle na kati ya biloko ya carrousel kobanda na lobɔkɔ ya mwasi tii na lobɔkɔ ya mobali. |
pause |
Epekisaka carrousel ekende na velo na nzela ya biloko. |
prev |
Ba cycles na eloko oyo eleki. Ezongi na mobengi yambo eloko ya liboso elakisami (ndakisa, yambo slid.bs.carousel likambo esalema). |
next |
Ezali kosala ba cycles tii na eloko oyo elandi. Ezongi na mobengi yambo eloko oyo elandi elakisami (ndakisa, yambo slid.bs.carousel likambo esalema). |
nextWhenVisible |
Kosala cycle carousel te na next tango page ezali komonana te to carrousel to parent na yango ezali komonana te. Ezongi na moto oyo abengi liboso ete eloko oyo olingi kolakisa elakisama |
to |
Ezali kosala cycle ya carousel na cadre moko boye (0 basé, ndenge moko na array). Ezongi na mobengi yambo eloko oyo olingi elakisama (ndakisa, yambo slid.bs.carousel likambo esalema). |
dispose |
Ebebisaka carrousel ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM) |
getInstance |
Méthode statique oyo e permettre yo ozua instance ya carrousel associé na élément DOM, okoki kosalela yango boye:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Méthode statique oyo ezongisaka instance ya carrousel oyo ezo sangana na élément DOM to ezo sala ya sika au cas où ebandaki ko initialiser te. Okoki kosalela yango boye:bootstrap.Carousel.getOrCreateInstance(element) |
Makambo oyo esalemaki
Classe ya carrousel ya Bootstrap e exposer deux événements pona ko crochet na fonctionnalité ya carrousel. Ba événements nionso mibale ezali na ba propriétés ya kobakisa oyo elandi:
direction
: Nzela oyo carrousel ezali kogumbama (soit"left"
to"right"
).relatedTarget
: Elemento ya DOM oyo ezali ko glisser na esika lokola eloko ya active.from
: Index ya eloko oyo ezali sikoyoto
: Index ya eloko oyo elandi
Ba événements nionso ya carrousel ebetamaka na carrousel yango moko (c.a.d. na <div class="carousel">
).
Lolenge ya likambo | Ndimbola |
---|---|
slide.bs.carousel |
Ezo benga mbala moko tango slide méthode ya instance ezo invoquer. |
slid.bs.carousel |
Ebetami ntango carousel esili kosala transition na yango ya diapositive. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})