Karużell
Komponent tal-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-browsers 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à.
Fl-aħħar nett, jekk qed tibni l-JavaScript tagħna mis-sors, teħtieġutil.js
.
Eżempju
Karużelli ma awtomatikament jinnormalizzaw id-dimensjonijiet slide. 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-target
attribut (jew href
għal links) li jaqbel mal- id
tal- .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-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-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-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">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-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Crossfade
Żid .carousel-fade
mal-karużell tiegħek biex tanima slajds bi transizzjoni fade minflok slide. Skont il-kontenut tal-karużell tiegħek (eż., slajds tat-test biss), tista 'tixtieq iżżid .bg-body
jew xi CSS tad-dwana mal- .carousel-item
i għal crossfading xieraq.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
Intervall individwali
Żid data-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-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Itfi swiping 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-touch
attribut. L-eżempju t'hawn taħt ukoll ma jinkludix l- data-ride
attribut u data-interval="false"
għalhekk ma jiddaħħalx awtomatikament.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Użu
Via attributi tad-data
Uża l-attributi tad-dejta biex tikkontrolla faċilment il-pożizzjoni tal-karużell. data-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-slide-to
biex tgħaddi indiċi ta' slide mhux ipproċessat lill-karużell data-slide-to="2"
, li jbiddel il-pożizzjoni tal-islajd għal indiċi partikolari li jibda b' 0
.
L- data-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-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:
$('.carousel').carousel()
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-
, bħal f' data-interval=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
intervall | numru | 5000 | L-ammont ta 'ħin biex tittardja bejn iċ-ċikliżmu ta' oġġett awtomatikament. Jekk false , il-karużell mhux awtomatikament iċ-ċiklu. |
tastiera | boolean | veru | Jekk il-karużell għandux jirreaġixxi għall-avvenimenti tat-tastiera. |
waqfa | spag | boolean | 'jiċċaqlaq' | Jekk issettjat għal Fuq apparati li għandhom touch, meta ssettjat għal |
ride | spag | falza | Iddoqq awtomatikament il-karużell wara li l-utent iċċikkel manwalment l-ewwel oġġett. Jekk issettjat għal 'carousel' , iddoqq awtomatikament il-karużell waqt it-tagħbija. |
wrap | boolean | veru | Jekk il-karużell għandux iċ-ċiklu kontinwu jew ikollux waqfiet iebsin. |
mess | boolean | veru | 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 .
.carousel(options)
Inizjalizza l-karużell b'għażliet fakultattivi object
u jibda jiċċirkola permezz ta 'oġġetti.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Ċikli permezz tal-oġġetti tal-karużell mix-xellug għal-lemin.
.carousel('pause')
Jwaqqaf il-karużell milli jiċċirkola permezz ta' oġġetti.
.carousel(number)
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 (jiġifieri qabel ma slid.bs.carousel
jseħħ l-avveniment).
.carousel('prev')
Ċikli għall-oġġett preċedenti. Jirritorna lil min iċempel qabel ma jkun intwera l-oġġett preċedenti (jiġifieri qabel ma slid.bs.carousel
jseħħ l-avveniment).
.carousel('next')
Ċikli għall-oġġett li jmiss. Jirritorna lil min iċempel qabel ma jkun intwera l-oġġett li jmiss (jiġifieri qabel ma slid.bs.carousel
jseħħ l-avveniment).
.carousel('dispose')
Jeqred il-karużell ta' element.
.carousel('nextWhenVisible')
Iddawwarx 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 jkunx viżibbli. Jirritorna lil min iċempel qabel ma jkun intwera l-oġġett li jmiss (jiġifieri qabel ma slid.bs.carousel
jseħħ l-avveniment).
.carousel('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 li jmiss (jiġifieri qabel ma slid.bs.carousel
jseħħ l-avveniment).
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 | Dan l-avveniment jispara immedjatament meta slide jiġi invokat il-metodu tal-istanza. |
jiżżerżaq.bs.karużell | Dan l-avveniment jiġi sparat meta l-karużell ikun lesta t-transizzjoni tal-islajds tiegħu. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Ibdel it-tul tat-tranżizzjoni
It-tul tat-tranżizzjoni ta ' .carousel-item
jista' jinbidel bil- $carousel-transition
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
).