Karuselo
Bildprezenta komponanto por bicikli tra elementoj - bildoj aŭ lumbildoj - kiel karuselo.
Kiel ĝi funkcias
La karuselo estas bildoprezento por bicikli tra serio da enhavo, konstruita kun CSS 3D transformoj kaj iom da JavaScript. Ĝi funkcias kun serio de bildoj, teksto aŭ kutima markado. Ĝi ankaŭ inkluzivas subtenon por antaŭaj/sekvaj kontroloj kaj indikiloj.
En retumiloj kie la Page Visibility API estas subtenata, la karuselo evitos gliti kiam la retpaĝo ne estas videbla por la uzanto (kiel kiam la retumila langeto estas neaktiva, la retumila fenestro estas minimumigita, ktp.).
prefers-reduced-motion
amaskomunikila demando. Vidu la
sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .
Bonvolu konscii, ke nestitaj karuseloj ne estas subtenataj, kaj karuseloj ĝenerale ne konformas al alireblaj normoj.
Ekzemplo
Karuseloj ne aŭtomate normaligas dimensiojn de lumbildoj. Kiel tia, vi eble bezonos uzi pliajn ilojn aŭ kutimajn stilojn por taŭge grandeco de enhavo. Dum karuseloj subtenas antaŭajn/postajn kontrolojn kaj indikilojn, ili ne estas eksplicite postulataj. Aldonu kaj agordu laŭplaĉe.
La .active
klaso devas esti aldonita al unu el la lumbildoj alie la karuselo ne estos videbla. Ankaŭ nepre agordu unikan id
por .carousel
laŭvolaj kontroloj, precipe se vi uzas plurajn karuselojn sur ununura paĝo. Kontrolaj kaj indikilaj elementoj devas havi data-bs-target
atributon (aŭ href
por ligiloj) kiu kongruas kun la id
de la .carousel
elemento.
Nur diapozitivoj
Jen karuselo kun nur diapozitivoj. Notu la ĉeeston de la .d-block
kaj .w-100
sur karuselaj bildoj por malhelpi retumilon defaŭltan bildan vicigon.
<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>
Kun kontroloj
Aldonante la antaŭajn kaj sekvajn kontrolojn. Ni rekomendas uzi <button>
elementojn, sed vi povas ankaŭ uzi <a>
elementojn kun 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>
Kun indikiloj
Vi ankaŭ povas aldoni la indikilojn al la karuselo, kune kun la kontroloj, ankaŭ.
<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>
Kun bildotekstoj
Aldonu subtitolojn al viaj diapozitivoj facile per la .carousel-caption
elemento en iu ajn .carousel-item
. Ili povas esti facile kaŝitaj sur pli malgrandaj vidfenestroj, kiel montrite malsupre, kun laŭvolaj montraj utilecoj . Ni kaŝas ilin komence per .d-none
kaj revenigas ilin sur mezgrandaj aparatoj kun .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
Aldonu .carousel-fade
al via karuselo por vigligi diapozitivojn per fada transiro anstataŭ diapozitivo.
<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>
Individua .carousel-item
intervalo
Aldonu data-bs-interval=""
al .carousel-item
por ŝanĝi la kvanton da tempo por prokrasti inter aŭtomate biciklado al la sekva ero.
<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>
Malebligu tuŝan svingadon
Karuseloj subtenas svingadon maldekstren/dekstren sur tuŝekranaj aparatoj por moviĝi inter lumbildoj. Ĉi tio povas esti malŝaltita uzante la data-bs-touch
atributon. La suba ekzemplo ankaŭ ne inkluzivas la data-bs-ride
atributon kaj havas data-bs-interval="false"
do ĝi ne aŭtomate ludas.
<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>
Malhela varianto
Aldonu .carousel-dark
al la .carousel
por pli malhelaj kontroloj, indikiloj kaj subtitoloj. Kontroloj estis inversigitaj de sia defaŭlta blanka plenigo kun la filter
CSS-posedaĵo. Subtitoloj kaj kontroloj havas kromajn Sass-variablojn kiuj personigas la color
kaj 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>
Propra transiro
La transira daŭro de .carousel-item
povas esti ŝanĝita per la $carousel-transition-duration
Sass-variablo antaŭ kompili aŭ kutimajn stilojn se vi uzas la kompilitan CSS. Se pluraj transiroj estas aplikataj, certigu, ke la transformtransiro unue estas difinita (ekz. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Variabloj
$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);
Uzado
Per datumaj atributoj
Uzu datumajn atributojn por facile kontroli la pozicion de la karuselo. data-bs-slide
akceptas la ŝlosilvortojn prev
aŭ next
, kiu ŝanĝas la glitpozicion rilate al ĝia nuna pozicio. Alternative, uzu data-bs-slide-to
por transdoni krudan glitan indekson al la karuselo data-bs-slide-to="2"
, kiu movas la glitpozicion al aparta indekso komencanta per 0
.
La data-bs-ride="carousel"
atributo estas uzata por marki karuselon kiel vigliganta ekde la paĝa ŝarĝo. Se vi ne uzas data-bs-ride="carousel"
pravalorigi vian karuselon, vi devas mem pravalorigi ĝin. Ĝi ne povas esti uzata en kombinaĵo kun (redunda kaj nenecesa) eksplicita JavaScript-komencigo de la sama karuselo.
Per JavaScript
Voku karuselon mane per:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Opcioj
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-
, kiel en data-bs-interval=""
.
Nomo | Tajpu | Defaŭlte | Priskribo |
---|---|---|---|
interval |
nombro | 5000 |
La kvanto da tempo por prokrasti inter aŭtomate biciklado de objekto. Se false , karuselo ne aŭtomate ciklos. |
keyboard |
bulea | true |
Ĉu la karuselo devus reagi al klavaraj eventoj. |
pause |
ŝnuro | bulea | 'hover' |
Se agordita al Sur tuŝ-ebligitaj aparatoj, kiam agordita al |
ride |
ŝnuro | bulea | false |
Aŭtomate ludas la karuselon post kiam la uzanto permane biciklas la unuan eron. Se agordita al 'carousel' , aŭtomate ludas la karuselon dum ŝarĝo. |
wrap |
bulea | true |
Ĉu la karuselo devas bicikli kontinue aŭ havi malfacilajn haltojn. |
touch |
bulea | true |
Ĉu la karuselo devus subteni maldekstren/dekstren glitajn interagojn sur tuŝekranaj aparatoj. |
Metodoj
Nesinkronaj metodoj kaj transiroj
Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .
Vi povas krei karuselan ekzemplon per la karusela konstrukciisto, ekzemple, por pravalorigi per pliaj opcioj kaj komenci bicikli tra eroj:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metodo | Priskribo |
---|---|
cycle |
Biciklas tra la karuselaj eroj de maldekstre dekstren. |
pause |
Maldaŭrigas la karuselon de bicikli tra eroj. |
prev |
Ciklas al la antaŭa ero. Revenas al la alvokanto antaŭ ol la antaŭa ero estis montrita (ekz., antaŭ ol la slid.bs.carousel evento okazas). |
next |
Bicikloj al la sekva ero. Revenas al la alvokanto antaŭ ol la sekva ero estas montrita (ekz., antaŭ ol la slid.bs.carousel evento okazas). |
nextWhenVisible |
Ne bicikligu karuselon al la sekva kiam la paĝo ne estas videbla aŭ la karuselo aŭ ĝia patro ne estas videblaj. Revenas al la alvokanto antaŭ ol la cela objekto estis montrita |
to |
Biciklas la karuselon al aparta kadro (bazita 0, simile al tabelo). Revenas al la alvokanto antaŭ ol la cela objekto estis montrita (ekz., antaŭ ol la slid.bs.carousel evento okazas). |
dispose |
Detruas la karuselon de elemento. (Forigas konservitajn datumojn sur la DOM-elemento) |
getInstance |
Senmova metodo, kiu ebligas al vi akiri la karuselan ekzemplon asociitan al DOM-elemento, vi povas uzi ĝin jene:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Senmova metodo kiu resendas karuselan petskribon asociitan al DOM-elemento aŭ kreas novan se ĝi ne estis pravigita. Vi povas uzi ĝin tiel:bootstrap.Carousel.getOrCreateInstance(element) |
Eventoj
La karuselklaso de Bootstrap elmontras du okazaĵojn por hokado en karuselfunkciecon. Ambaŭ okazaĵoj havas la sekvajn kromajn trajtojn:
direction
: La direkto en kiu la karuselo glitas (aŭ"left"
aŭ"right"
).relatedTarget
: La DOM-elemento kiu estas glita en lokon kiel la aktiva objekto.from
: La indekso de la aktuala eroto
: La indekso de la sekva ero
Ĉiuj karuselaj eventoj estas pafitaj ĉe la karuselo mem (te ĉe la <div class="carousel">
).
Eventa tipo | Priskribo |
---|---|
slide.bs.carousel |
Pafas tuj kiam la slide ekzempla metodo estas alvokita. |
slid.bs.carousel |
Pafite kiam la karuselo kompletigis sian glitan transiron. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})