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.).

Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro 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' .activeKlass muss op eng vun de Rutschen bäigefüügt ginn, soss ass de Karussell net ze gesinn. Gitt och sécher datt Dir eng eenzegaarteg ID op der .carouselfir optional Kontrollen setzt, besonnesch wann Dir verschidde Karussell op enger eenzeger Säit benotzt. Kontroll- an Indikatorelementer mussen en data-targetAttribut hunn (oder hreffir Linken) déi mat der ID vum .carouselElement entsprécht.

Nëmmen Rutschen

Hei ass nëmmen eng Karussell mat Rutschen. Notéiert d'Präsenz vun den .d-blockan .w-100op 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:

<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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Mat Iwwerschrëften

Füügt Ënnerschrëften op Är Rutschen einfach mat dem .carousel-captionElement 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-nonea bréngen se zréck op mëttelgrouss Apparater mat .d-md-block.

Éischt Rutsch Label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Zweet Rutsch Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Drëtt Rutsch Label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Crossfade

Füügt .carousel-fadeop Äre Karussell fir Rutschen ze animéieren mat engem Fade-Iwwergang amplaz vun enger Rutsch.

<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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Individuell `.carousel-item`Intervall

Füügt data-interval=""zu engem .carousel-itemfir 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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Benotzung

Via daten Attributer

Benotzt Datenattributer fir d'Positioun vum Karussell einfach ze kontrolléieren. data-slideakzeptéiert d'Schlësselwierder prevoder next, déi d'Rutschpositioun relativ zu senger aktueller Positioun ännert. Alternativ benotzt data-slide-tofir 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 falsch, 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 `"hover"`, Paus de Vëlo vun der Karussell op `mouseenter`a setzt de Vëlo vun der Karussell op `mouseleave`. Wann et op gesat gëtt `false`, iwwer de Karussell hänken wäert et net pausen. Op Touch-aktivéierten Apparater, wann se op gesat ginn `"hover"`, wäert de Vëlo op pausen `touchend`(wann de Benotzer fäerdeg ass mat der Karussell interagéieren) fir zwee Intervalle, ier se automatesch erëm ufänken. Notéiert datt dëst zousätzlech zum uewe genannte Mausverhalen ass.
fueren	String	falsch	Autoplays de Karussell nodeems de Benotzer den éischten Element manuell cycléiert. Wann "Karussell", autoplays de Karussell op 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 .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

`.carousel(options)`

Initialiséiert de Karussell mat engem fakultativen Optiounen objecta 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.carouselEvenement 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.carouselEvenement 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.carouselEvenement 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.carouselEvenement 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.carouselEvenement geschitt ass).

Evenementer

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event Type	Description
slide.bs.carousel	This event fires immediately when the `slide` instance method is invoked.
slid.bs.carousel	This event is fired when the carousel has completed its slide transition.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Change transition duration

D'Iwwergangsdauer vu .carousel-itemkann mat der $carousel-transitionSass 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).