Karużell
Komponent ta' wiri ta' pjastri għaċ-ċikliżmu minn elementi—immaġini jew slides ta' test—bħal karużell.
Kif taħdem
Il-karużell huwa slideshow għaċ-ċikliżmu permezz ta 'serje ta' kontenut, mibnija bi CSS 3D transforms u daqsxejn ta 'JavaScript. Jaħdem b'serje ta 'immaġini, test, jew markup personalizzat. Jinkludi wkoll appoġġ għal kontrolli u indikaturi preċedenti/li jmiss.
Fil-brawżers fejn l- API tal-Viżibilità tal-Paġni hija appoġġjata, il-karużell jevita li jiżżerżaq meta l-paġna tal-web ma tkunx viżibbli għall-utent (bħal meta t-tab tal-browser tkun inattiva, it-tieqa tal-browser tkun minimizzata, eċċ.).
prefers-reduced-motion
-mistoqsija tal-midja. Ara t-
taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .
Jekk jogħġbok kun konxju li l-karużelli nested mhumiex appoġġjati, u l-karużelli ġeneralment mhumiex konformi mal-istandards tal-aċċessibbiltà.
Eżempju
Il-karużelli ma jinnormalizzawx awtomatikament id-dimensjonijiet tal-pjastra. Bħala tali, jista 'jkollok bżonn tuża utilitajiet addizzjonali jew stili tad-dwana biex id-daqs xieraq tal-kontenut. Filwaqt li l-karużelli jappoġġjaw kontrolli u indikaturi preċedenti/li jmiss, mhumiex meħtieġa b'mod espliċitu. Żid u ppersonalizza kif tara xieraq.
Il- .active
klassi trid tiżdied ma' waħda mill-pjastri inkella l-karużell ma jkunx viżibbli. Kun żgur ukoll li tissettja uniku id
għal .carousel
kontrolli fakultattivi, speċjalment jekk qed tuża karużelli multipli fuq paġna waħda. L-elementi ta' kontroll u indikaturi għandu jkollhom data-bs-target
attribut (jew href
għal links) li jaqbel ma id
' l- .carousel
element.
Slajds biss
Hawn karużell bi slides biss. Innota l-preżenza tal- .d-block
u .w-100
fuq immaġini tal-karużell biex tevita l-allinjament tal-immaġni default tal-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>
Bil-kontrolli
Żieda fil-kontrolli preċedenti u li jmiss. Nirrakkomandaw li tuża <button>
elementi, iżda tista' wkoll tuża <a>
elementi b' 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>
B'indikaturi
Tista 'wkoll iżżid l-indikaturi mal-karużell, flimkien mal-kontrolli, ukoll.
<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>
Bil-titoli
Żid captions mal-pjastri tiegħek faċilment bl- .carousel-caption
element fi kwalunkwe .carousel-item
. Jistgħu jinħbew faċilment fuq viewports iżgħar, kif muri hawn taħt, b'utilitajiet tal- wiri fakultattivi . Aħna naħbuhom inizjalment .d-none
u nġibuhom lura fuq apparat ta 'daqs medju b' .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
Żid .carousel-fade
mal-karużell tiegħek biex tanima slajds bi transizzjoni fade minflok 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
Intervall individwali
Żid data-bs-interval=""
ma 'a .carousel-item
biex tibdel l-ammont ta' ħin biex tittardja bejn iċ-ċikliżmu awtomatikament għall-oġġett li jmiss.
<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>
Iddiżattiva l-iswiping tal-mess
Karużelli jappoġġjaw swiping xellug/lemin fuq apparati touchscreen biex jimxu bejn slides. Dan jista 'jiġi diżattivat bl-użu tal- data-bs-touch
attribut. L-eżempju t'hawn taħt ukoll ma jinkludix l- data-bs-ride
attribut u data-bs-interval="false"
għalhekk ma jiddaħħalx awtomatikament.
<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>
Varjant skur
Żid .carousel-dark
mal- .carousel
għal kontrolli, indikaturi u captions jiskuraw. Il-kontrolli ġew maqluba mill-mili abjad default tagħhom bil- filter
proprjetà CSS. Captions u kontrolli għandhom varjabbli Sass addizzjonali li jippersonalizzaw il- color
u 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>
Transizzjoni tad-dwana
It-tul tat-tranżizzjoni ta ' .carousel-item
jista' jinbidel bil- $carousel-transition-duration
varjabbli Sass qabel il-kompilazzjoni jew stili personalizzati jekk qed tuża s-CSS ikkumpilat. Jekk jiġu applikati transizzjonijiet multipli, kun żgur li t-tranżizzjoni tat-trasformazzjoni hija definita l-ewwel (eż. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Varjabbli
$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);
Użu
Via attributi tad-data
Uża l-attributi tad-dejta biex tikkontrolla faċilment il-pożizzjoni tal-karużell. data-bs-slide
jaċċetta l-kliem kjavi prev
jew next
, li jibdel il-pożizzjoni slide relattiva għall-pożizzjoni attwali tagħha. Inkella, uża data-bs-slide-to
biex tgħaddi indiċi ta' slide mhux ipproċessat lill-karużell data-bs-slide-to="2"
, li jbiddel il-pożizzjoni tal-islajd għal indiċi partikolari li jibda b' 0
.
L- data-bs-ride="carousel"
attribut jintuża biex jimmarka karużell bħala animazzjoni li jibda mat-tagħbija tal-paġna. Jekk ma tużax data-bs-ride="carousel"
biex initialize carousel tiegħek, inti għandek initialize it yourself. Ma jistax jintuża flimkien ma 'inizjalizzazzjoni JavaScript espliċita (superjuri u mhux meħtieġa) tal-istess carousel.
Via JavaScript
Ċempel il-karużell manwalment bi:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-
, bħal f' data-bs-interval=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
interval |
numru | 5000 |
L-ammont ta 'ħin biex tittardja bejn iċ-ċikliżmu awtomatiku ta' oġġett. Jekk false , il-karużell mhux awtomatikament iċ-ċiklu. |
keyboard |
boolean | true |
Jekk il-karużell għandux jirreaġixxi għall-avvenimenti tat-tastiera. |
pause |
spag | boolean | 'hover' |
Jekk issettjat għal Fuq apparati li għandhom touch, meta ssettjat għal |
ride |
spag | boolean | false |
Jilgħab awtomatikament il-karużell wara li l-utent iċekkel manwalment l-ewwel oġġett. Jekk issettjat għal 'carousel' , iddoqq awtomatikament il-karużell waqt it-tagħbija. |
wrap |
boolean | true |
Jekk il-karużell għandux iċ-ċiklu kontinwu jew ikollux waqfiet iebsin. |
touch |
boolean | true |
Jekk il-karużell għandux jappoġġja interazzjonijiet ta' swipe xellug/lemin fuq apparati touchscreen. |
Metodi
Metodi asinkroniċi u tranżizzjonijiet
Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .
Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .
Tista 'toħloq istanza tal-karużell mal-kostruttur tal-karużell, pereżempju, biex tibda b'għażliet addizzjonali u tibda tiċċirkola permezz ta' oġġetti:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metodu | Deskrizzjoni |
---|---|
cycle |
Ċikli permezz tal-oġġetti tal-karużell mix-xellug għal-lemin. |
pause |
Jwaqqaf il-karużell milli jiċċirkola permezz ta' oġġetti. |
prev |
Ċikli għall-oġġett preċedenti. Jirritorna lil min iċempel qabel ma jkun intwera l-oġġett preċedenti (eż., qabel ma slid.bs.carousel jseħħ l-avveniment). |
next |
Ċikli għall-oġġett li jmiss. Jirritorna lil min iċempel qabel ma jkun intwera l-oġġett li jmiss (eż., qabel ma slid.bs.carousel jseħħ l-avveniment). |
nextWhenVisible |
M'għandekx iddawwar il-karużell għall-ieħor meta l-paġna ma tkunx viżibbli jew il-karużell jew il-ġenitur tiegħu ma jkunux viżibbli. Jirritorna lil min iċempel qabel ma jkun intwera l-oġġett fil-mira |
to |
Iċċekkja l-karużell għal qafas partikolari (ibbażat fuq 0, simili għal firxa). Jirritorna lil min iċempel qabel ma jkun intwera l-oġġett fil-mira (eż., qabel ma slid.bs.carousel jseħħ l-avveniment). |
dispose |
Jeqred il-karużell ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM) |
getInstance |
Metodu statiku li jippermettilek li tikseb l-istanza tal-karużell assoċjata ma' element DOM, tista' tużah bħal dan:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Metodu statiku li jirritorna istanza tal-karużell assoċjata ma' element DOM jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata. Tista' tużah bħal dan:bootstrap.Carousel.getOrCreateInstance(element) |
Avvenimenti
Il-klassi tal-karużell tal-Bootstrap tesponi żewġ avvenimenti biex tgħaqqad il-funzjonalità tal-karużell. Iż-żewġ avvenimenti għandhom il-proprjetajiet addizzjonali li ġejjin:
direction
: Id-direzzjoni li fiha l-karużell qed jiżżerżaq ("left"
jew"right"
).relatedTarget
: L-element DOM li qed jiżżerżaq fil-post bħala l-oġġett attiv.from
: L-indiċi tal-oġġett kurrentito
: L-indiċi tal-oġġett li jmiss
L-avvenimenti kollha tal-karużell jiġu sparati lejn il-karużell innifsu (jiġifieri fil- <div class="carousel">
).
Tip ta' avveniment | Deskrizzjoni |
---|---|
slide.bs.carousel |
Nirien immedjatament meta slide jiġi invokat il-metodu tal-istanza. |
slid.bs.carousel |
Sparat meta l-karużell ikun lesta t-transizzjoni tal-pjastra tiegħu. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})