Karussell

Eng Slideshow Komponent fir Vëlo duerch Elementer - Biller oder Rutschen vum Text - wéi e Karussell.

Op dëser Säit

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.

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. Ginn och sécher op eng eenzegaarteg idop der .carouselfir fakultativ Kontrollen ze setzen, virun allem wann Dir MÉI Karussell op enger eenzeger Säit benotzt. Kontroll- an Indikatorelementer mussen en data-bs-targetAttribut hunn (oder hreffir Linken) déi iddem .carouselElement entspriechen.

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.

html

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

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

html

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

Mat Indicateuren

Dir kënnt och d'Indikatoren op de Karussell addéieren, nieft de Kontrollen och.

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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>

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

E puer representativ Plazhalter Inhalt fir déi éischt Rutsch.

Zweet Rutsch Label

E puer representativ Plazhalter Inhalt fir déi zweet Rutsch.

Drëtt Rutsch Label

E puer representativ Plazhalter Inhalt fir déi drëtt Rutsch.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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

Füügt .carousel-fadeop Ä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-bodypuer personaliséiert CSS op d' .carousel-items addéieren fir richteg Crossfading.

html

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

Individuell `.carousel-item`Intervall

Füügt data-bs-interval=""zu engem .carousel-itemfir d'Zäit ze änneren fir ze verzögeren tëscht automateschen Vëlo op den nächsten Element.

html

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

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-bs-touchAttribut behënnert ginn. D'Beispill hei drënner enthält och den data-bs-rideAttribut net sou datt et net automatesch spillt.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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>

Däischter Variant

Füügt .carousel-darkder .carouselfir däischter Kontrollen, Indikatoren an Ënnerschrëften. D'Kontrollen goufen ëmgedréint vun hirer Standardwäiss Fëllung mat der filterCSS Eegeschafte. Iwwerschrëften a Kontrollen hunn zousätzlech Sass Variabelen déi den coloran personaliséieren background-color.

Éischt Rutsch Label

E puer representativ Plazhalter Inhalt fir déi éischt Rutsch.

Zweet Rutsch Label

E puer representativ Plazhalter Inhalt fir déi zweet Rutsch.

Drëtt Rutsch Label

E puer representativ Plazhalter Inhalt fir déi drëtt Rutsch.

html

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

Benotzerdefinéiert Iwwergank

D'Iwwergangsdauer vu .carousel-itemkann mat der $carousel-transition-durationSass 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 (zB transition: transform 2s ease, opacity .5s ease-out).

Sass

Variablen

Variablen fir all Karussell:

$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`)

Variablen fir den donkelen Karussell :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Benotzung

Duerch Daten Attributer

Benotzt Datenattributer fir d'Positioun vum Karussell einfach ze kontrolléieren. data-bs-slideakzeptéiert d'Schlësselwierder prevoder next, déi d'Rutschpositioun relativ zu senger aktueller Positioun ännert. Alternativ benotzt data-bs-slide-tofir e roude Rutschindex un de Karussell ze passéieren data-bs-slide-to="2", deen d'Rutschpositioun op e bestëmmten Index verännert, deen mat ufänkt 0.

Den data-bs-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-bs-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:

const carousel = new bootstrap.Carousel('#myCarousel')

Optiounen

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Numm	Typ	Default	Beschreiwung
`interval`	Zuel	`5000`	De Betrag vun der Zäit fir ze verzögeren tëscht dem automateschen Vëlo vun engem Element.
`keyboard`	boolesch	`true`	Ob de Karussell op Keyboard Eventer reagéiere soll.
`pause`	string, bool	`"hover"`	Wann agestallt op `"hover"`, Paus de Vëlo vun der Karussell op `mouseenter`a setzt de Vëlo vun der Karussell op `mouseleave`. Wann agestallt op `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 mat der Karussell interagéiert huet) fir zwee Intervalle, ier se automatesch erëm ufänken. Dëst ass zousätzlech zum Mausverhalen.
`ride`	string, bool	`false`	Wann op gesat `true`, spillt de Karussell automatesch nodeems de Benotzer den éischten Element manuell zyklet. Wann op gesat `"carousel"`, spillt de Karussell automatesch beim Laascht.
`touch`	boolesch	`true`	Ob de Karussell soll lénks / riets Swipe Interaktiounen op Touchscreen Geräter ënnerstëtzen.
`wrap`	boolesch	`true`	Op de Karussell soll kontinuéierlech fueren oder schwéier Arrêten hunn.

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 .

Dir kënnt eng Karussellinstanz mam Karussellkonstruktor erstellen, zum Beispill, fir mat zousätzlech Optiounen ze initialiséieren an duerch Elementer ze fueren:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Method	Beschreiwung
`cycle`	Zyklen duerch d'Karussellartikele vu lénks op riets.
`dispose`	Zerstéiert en Element Karussell. (läscht gespäichert Daten am DOM Element)
`getInstance`	Statesch Method déi Iech erlaabt d'Karussell-Instanz mat engem DOM-Element verbonnen ze kréien, Dir kënnt et esou benotzen `bootstrap.Carousel.getInstance(element)`:.
`getOrCreateInstance`	Statesch Method déi eng Karussellinstanz zréckginn, déi mat engem DOM Element assoziéiert ass oder eng nei erstellt am Fall wou se net initialiséiert gouf. Dir kënnt et esou benotzen `bootstrap.Carousel.getOrCreateInstance(element)`:.
`next`	Zyklen op den nächsten Element. Gëtt zréck op den Uruffer ier deen nächsten Element gewise gouf (zB ier d' `slid.bs.carousel`Evenement geschitt ass).
`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 den Zilartikel gewise gouf .
`pause`	Stoppt de Karussell aus dem Vëlo duerch Elementer.
`prev`	Zyklen op dat viregt Element. Gëtt zréck op den Uruffer ier de viregten Element gewise gouf (zB ier d' `slid.bs.carousel`Evenement geschitt ass).
`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 den Zilartikel gewise gouf (zB ier den `slid.bs.carousel`Event geschitt ass).

Evenementer

D'Bootstrap Karussell Klass weist zwee Eventer fir d'Karussellfunktionalité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 Artikel
to: Den Index vum nächste Punkt

All Karussell-Evenementer ginn op der Karussell selwer geschoss (dh op der <div class="carousel">).

Event Typ	Beschreiwung
`slid.bs.carousel`	Entlooss wann de Karussell säi Rutschiwwergang ofgeschloss huet.
`slide.bs.carousel`	Brennt direkt wann d' `slide`Instanzmethod opgeruff gëtt.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Karussell

Wéi et funktionnéiert

Beispill

Nëmmen Rutschen

Mat Kontrollen

Mat Indicateuren

Mat Iwwerschrëften

Éischt Rutsch Label

Zweet Rutsch Label

Drëtt Rutsch Label

Crossfade

Individuell .carousel-itemIntervall

Touch Swiping auszeschalten

Däischter Variant

Éischt Rutsch Label

Zweet Rutsch Label

Drëtt Rutsch Label

Benotzerdefinéiert Iwwergank

Sass

Variablen

Benotzung

Duerch Daten Attributer

Iwwer JavaScript

Optiounen

Methoden

Asynchron Methoden an Iwwergäng

Evenementer

Individuell `.carousel-item`Intervall