Karussell
Eng Slideshow Komponent fir Vëlo duerch Elementer - Biller oder Rutschen vum Text - wéi e Karussell.
Wéi et funktionnéiert
De Karussell ass eng Diashow fir Vëlo duerch eng Serie vun Inhalter, gebaut mat CSS 3D Transformatiounen an e bësse JavaScript. Et funktionnéiert mat enger Serie vu Biller, Text oder personaliséiert Markup. Et enthält och Ënnerstëtzung fir virdrun / nächst Kontrollen an Indikatoren.
A Browser wou d' Säit Visibilitéit API ënnerstëtzt gëtt, vermeit de Karussell rutschen wann d'Websäit net fir de Benotzer sichtbar ass (wéi wann de Browser Tab inaktiv ass, d'Browserfenster miniméiert ass, etc.).
prefers-reduced-motion
Medienufro of. Kuckt d'
Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .
W.e.g. bewosst datt nestéiert Karussell net ënnerstëtzt ginn, a Karussell sinn allgemeng net konform mat Accessibilitéitsnormen.
Schlussendlech, wann Dir eis JavaScript aus der Quell baut, brauchutil.js
et .
Beispill
Karussell normaliséieren net automatesch d'Dimensioune vun der Rutsch. Als solch musst Dir eventuell zousätzlech Utilities oder personaliséiert Stiler benotze fir den Inhalt entspriechend ze gréissen. Wärend Karussell ënnerstëtzen fréier / nächst Kontrollen an Indikatoren, si sinn net explizit erfuerderlech. Füügt a personaliséiert wéi Dir passt.
D' .active
Klass muss op eng vun de Rutschen bäigefüügt ginn, soss ass de Karussell net ze gesinn. Ginn och sécher op eng eenzegaarteg id
op der .carousel
fir fakultativ Kontrollen ze setzen, virun allem wann Dir MÉI Karussell op enger eenzeger Säit benotzt. Kontroll- an Indikatorelementer mussen en data-target
Attribut hunn (oder href
fir Linken) déi id
dem .carousel
Element entspriechen.
Nëmmen Rutschen
Hei ass nëmmen eng Karussell mat Rutschen. Notéiert d'Präsenz vun den .d-block
an .w-100
op Karussellbiller fir Browser Standardbildausrichtung ze verhënneren.
<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>
Mat Kontrollen
Füügt an de fréieren an nächste Kontrollen. Mir recommandéieren <button>
Elementer ze benotzen, awer Dir kënnt och <a>
Elementer mat benotzen 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>
Mat Indicateuren
Dir kënnt och d'Indikatoren op de Karussell addéieren, nieft de Kontrollen och.
<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>
Mat Iwwerschrëften
Füügt Ënnerschrëften op Är Rutschen einfach mat dem .carousel-caption
Element an all .carousel-item
. Si kënne ganz einfach op méi klenge Viewports verstoppt ginn, wéi hei ënnendrënner, mat optionalen Display-Utilities . Mir verstoppen se am Ufank mat .d-none
a bréngen se zréck op mëttelgrouss Apparater mat .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
Füügt .carousel-fade
op Äre Karussell fir Rutschen ze animéieren mat engem Fade-Iwwergang amplaz vun enger Rutsch. Ofhängeg vun Ärem Karussell-Inhalt (zB Text nëmmen Rutschen), wëllt Dir vläicht e .bg-body
puer personaliséiert CSS op d' .carousel-item
s addéieren fir richteg Crossfading.
<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>
Individuell .carousel-item
Intervall
Füügt data-interval=""
zu engem .carousel-item
fir d'Zäit ze änneren fir ze verzögeren tëscht automateschen Vëlo op den nächsten Element.
<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>
Touch Swiping auszeschalten
Karussell ënnerstëtzen lénks / riets swipen op Touchscreen Geräter fir tëscht Rutschen ze réckelen. Dëst kann mat dem data-touch
Attribut behënnert ginn. D'Beispill hei drënner enthält och net den data-ride
Attribut an huet data-interval="false"
also net autoplay.
<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>
Benotzung
Via daten Attributer
Benotzt Datenattributer fir d'Positioun vum Karussell einfach ze kontrolléieren. data-slide
akzeptéiert d'Schlësselwierder prev
oder next
, déi d'Rutschpositioun relativ zu senger aktueller Positioun ännert. Alternativ benotzt data-slide-to
fir e roude Rutschindex un de Karussell ze passéieren data-slide-to="2"
, deen d'Rutschpositioun op e bestëmmten Index verännert, deen mat ufänkt 0
.
Den data-ride="carousel"
Attribut gëtt benotzt fir e Karussell als Animatioun ze markéieren, ugefaange bei der Lueden vun der Säit. Wann Dir net benotzt data-ride="carousel"
fir Är Karussell ze initialiséieren, musst Dir se selwer initialiséieren. Et kann net a Kombinatioun mat (redundant an onnéideg) explizit JavaScript Initialiséierung vun der selwechter Karussell benotzt ginn.
Iwwer JavaScript
Call Karussell manuell mat:
$('.carousel').carousel()
Optiounen
Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-
, wéi an data-interval=""
.
Numm | Typ | Default | Beschreiwung |
---|---|---|---|
Intervall | Zuel | 5000 | De Betrag vun der Zäit fir ze verzögeren tëscht dem automateschen Vëlo vun engem Element. Wann false , Karussell wäert net automatesch Zyklus. |
Tastatur | boolesch | wouer | Ob de Karussell op Keyboard Eventer reagéiere soll. |
pausen | streng | boolesch | 'schwiewen' | Wann agestallt op Op Touch-aktivéierten Apparater, wann se op gesat ginn |
fueren | String | falsch | Autoplays de Karussell nodeems de Benotzer den éischten Element manuell cycléiert. Wann op gesat 'carousel' , spillt de Karussell automatesch beim Laascht. |
ëmklammen | boolesch | wouer | Op de Karussell soll kontinuéierlech fueren oder schwéier Arrêten hunn. |
beréieren | boolesch | wouer | Ob de Karussell soll lénks / riets Swipe Interaktiounen op Touchscreen Geräter ënnerstëtzen. |
Methoden
Asynchron Methoden an Iwwergäng
All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .
.carousel(options)
Initialiséiert de Karussell mat engem fakultativen Optiounen object
a fänkt mam Vëlo duerch Elementer un.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Zyklen duerch d'Karussellartikele vu lénks op riets.
.carousel('pause')
Stoppt de Karussell aus dem Vëlo duerch Elementer.
.carousel(number)
Zyklen de Karussell op e bestëmmte Frame (0 baséiert, ähnlech wéi eng Array). Gitt zréck op den Uruffer ier d'Zilartikel gewise gouf (dh ier d' slid.bs.carousel
Evenement geschitt ass).
.carousel('prev')
Zyklen op dat viregt Element. Gëtt zréck op den Uruffer ier de viregten Element gewise gouf (dh ier d' slid.bs.carousel
Evenement geschitt ass).
.carousel('next')
Zyklen op den nächsten Element. Gëtt zréck op den Uruffer ier deen nächsten Element gewise gouf (dh ier d' slid.bs.carousel
Evenement geschitt ass).
.carousel('dispose')
Zerstéiert en Element Karussell.
.carousel('nextWhenVisible')
Fuert de Karussell net op déi nächst wann d'Säit net sichtbar ass oder de Karussell oder seng Elteren net sichtbar ass. Gëtt zréck op den Uruffer ier deen nächsten Element gewise gouf (dh ier d' slid.bs.carousel
Evenement geschitt ass).
.carousel('to')
Zyklen de Karussell op e bestëmmte Frame (0 baséiert, ähnlech wéi eng Array). Gëtt zréck op den Uruffer ier deen nächsten Element gewise gouf (dh ier d' slid.bs.carousel
Evenement geschitt ass).
Evenementer
D'Bootstrap Karussell Klass weist zwee Eventer fir d'Karussell Funktionalitéit unzehaken. Béid Eventer hunn déi folgend zousätzlech Eegeschaften:
direction
: D'Richtung an där de Karussell rutscht (entweder"left"
oder"right"
).relatedTarget
: Den DOM-Element deen als aktiven Element op d'Plaz gerutscht gëtt.from
: Den Index vum aktuellen Artikelto
: Den Index vum nächste Punkt
All Karussellevenementer ginn op de Karussell selwer geschoss (dh op der <div class="carousel">
).
Event Typ | Beschreiwung |
---|---|
slide.bs.karussell | Dëst Event brennt direkt wann d' slide Instanzmethod opgeruff gëtt. |
slid.bs.karussell | Dëst Evenement gëtt entlooss wann de Karussell säi Rutschiwwergang ofgeschloss huet. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Iwwergank Dauer änneren
D'Iwwergangsdauer vu .carousel-item
kann mat der $carousel-transition
Sass Variabel geännert ginn ier Dir kompiléiert oder personaliséiert Stiler benotzt, wann Dir de kompiléierte CSS benotzt. Wann méi Iwwergäng applizéiert ginn, gitt sécher datt den Transformatiounsiwwergang als éischt definéiert ass (z.B. transition: transform 2s ease, opacity .5s ease-out
).