Karrousel

'n Skyfievertoning-komponent vir fietsry deur elemente - prente of skyfies van teks - soos 'n karrousel.

Op hierdie bladsy

Hoe dit werk

Die karrousel is 'n skyfievertoning vir fietsry deur 'n reeks inhoud, gebou met CSS 3D-transformasies en 'n bietjie JavaScript. Dit werk met 'n reeks beelde, teks of persoonlike opmaak. Dit sluit ook ondersteuning vir vorige/volgende kontroles en aanwysers in.

In blaaiers waar die bladsysigbaarheid-API ondersteun word, sal die karrousel gly vermy wanneer die webblad nie vir die gebruiker sigbaar is nie (soos wanneer die blaaieroortjie onaktief is, die blaaiervenster geminimaliseer word, ens.).

Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

Neem asseblief kennis dat geneste karrousels nie gesteun word nie, en karrousels voldoen oor die algemeen nie aan toeganklikheidstandaarde nie.

Voorbeeld

Karrousels normaliseer nie outomaties skyfie-afmetings nie. As sodanig moet jy dalk bykomende nutsprogramme of pasgemaakte style gebruik om die inhoud op die regte grootte te kry. Terwyl karrousels vorige/volgende kontroles en aanwysers ondersteun, word dit nie uitdruklik vereis nie. Voeg by en pasmaak soos jy goeddink.

Die .activeklas moet by een van die skyfies gevoeg word anders sal die karrousel nie sigbaar wees nie. Maak ook seker dat jy 'n unieke idop die .carouselvir opsionele kontroles stel, veral as jy verskeie karrousels op 'n enkele bladsy gebruik. Beheer- en aanwyserelemente moet 'n data-bs-targetkenmerk hê (of hrefvir skakels) wat ooreenstem met die idvan die .carouselelement.

Slegs skyfies

Hier is 'n karrousel met slegs skyfies. Let op die teenwoordigheid van die .d-blocken .w-100op karrouselbeelde om blaaier verstekbeeldbelyning te voorkom.

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>

Met kontroles

Voeg die vorige en volgende kontroles by. Ons beveel aan om <button>elemente te gebruik, maar jy kan ook <a>elemente met 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>

Met aanwysers

Jy kan ook die aanwysers by die karrousel voeg, langs die kontroles ook.

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>

Met byskrifte

Voeg byskrifte maklik by jou skyfies met die .carousel-captionelement binne enige .carousel-item. Hulle kan maklik op kleiner viewports versteek word, soos hieronder getoon, met opsionele vertoonhulpmiddels . Ons steek hulle aanvanklik weg met .d-noneen bring hulle terug op mediumgrootte toestelle met .d-md-block.

Eerste skyfie etiket

Sommige verteenwoordigende plekhouer-inhoud vir die eerste skyfie.

Tweede skyfie-etiket

Sommige verteenwoordigende plekhouer-inhoud vir die tweede skyfie.

Derde skyfie-etiket

Sommige verteenwoordigende plekhouer-inhoud vir die derde skyfie.

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

Voeg .carousel-fadeby jou karrousel om skyfies te animeer met 'n vervaag-oorgang in plaas van 'n skyfie. Afhangende van jou karrousel-inhoud (bv. slegs teksskyfies), wil jy dalk ' .bg-bodyn pasgemaakte CSS by die .carousel-items voeg vir behoorlike kruisvervaag.

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>

Individuele `.carousel-item`interval

Voeg data-bs-interval=""by 'n .carousel-itemom die hoeveelheid tyd om te vertraag tussen outomatiese fietsry na die volgende item te verander.

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>

Deaktiveer raakswiep

Karrousels ondersteun swiep links/regs op raakskermtoestelle om tussen skyfies te beweeg. Dit kan gedeaktiveer word met die data-bs-touchkenmerk. Die voorbeeld hieronder sluit ook nie die data-bs-ridekenmerk in nie, so dit speel nie outomaties nie.

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>

Donker variant

Voeg .carousel-darkby die .carouselvir donkerder kontroles, aanwysers en byskrifte. Kontroles is omgekeer van hul verstek wit vulling met die filterCSS-eienskap. Byskrifte en kontroles het bykomende Sass-veranderlikes wat die coloren pasmaak background-color.

Eerste skyfie etiket

Sommige verteenwoordigende plekhouer-inhoud vir die eerste skyfie.

Tweede skyfie-etiket

Sommige verteenwoordigende plekhouer-inhoud vir die tweede skyfie.

Derde skyfie-etiket

Sommige verteenwoordigende plekhouer-inhoud vir die derde skyfie.

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>

Pasgemaakte oorgang

Die oorgangsduur van .carousel-itemkan verander word met die $carousel-transition-durationSass-veranderlike voor samestelling of pasgemaakte style as jy die saamgestelde CSS gebruik. As veelvuldige oorgange toegepas word, maak seker dat die transformasie-oorgang eers gedefinieer word (bv transition: transform 2s ease, opacity .5s ease-out. ).

Sass

Veranderlikes

Veranderlikes vir alle karrousels:

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

Veranderlikes vir die donker karrousel :

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

Gebruik

Via data-eienskappe

Gebruik data-kenmerke om die posisie van die karrousel maklik te beheer. data-bs-slideaanvaar die sleutelwoorde prevof next, wat die skuifposisie relatief tot sy huidige posisie verander. Alternatiewelik, gebruik data-bs-slide-toom 'n rou skyfie-indeks na die karrousel deur te data-bs-slide-to="2"gee, wat die skyfieposisie verskuif na 'n spesifieke indeks wat begin met 0.

Die data-bs-ride="carousel"kenmerk word gebruik om 'n karrousel as animasie te merk vanaf bladsy laai. As jy dit nie gebruik data-bs-ride="carousel"om jou karrousel te inisialiseer nie, moet jy dit self inisialiseer. Dit kan nie in kombinasie met (oortollige en onnodige) eksplisiete JavaScript-inisialisering van dieselfde karrousel gebruik word nie.

Via JavaScript

Bel karrousel handmatig met:

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

Opsies

Aangesien opsies deur data-kenmerke of JavaScript deurgegee kan word, kan jy 'n opsienaam byvoeg data-bs-, soos in data-bs-animation="{value}". Maak seker dat jy die kastipe van die opsienaam verander van " camelCase " na " kebab-case " wanneer die opsies deur data-kenmerke deurgegee word. Gebruik byvoorbeeld in data-bs-custom-class="beautifier"plaas van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteun alle komponente 'n eksperimentele gereserveerde data-kenmerk data-bs-configwat eenvoudige komponentkonfigurasie as 'n JSON-string kan huisves. Wanneer 'n element data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"kenmerke het, sal die finale titlewaarde wees 456en die afsonderlike data-kenmerke sal waardes wat op gegee word, ignoreer data-bs-config. Daarbenewens kan bestaande data-kenmerke JSON-waardes soos data-bs-delay='{"show":0,"hide":150}'.

Naam	Tik	Verstek	Beskrywing
`interval`	nommer	`5000`	Die tyd om te vertraag tussen die outomatiese fietsry van 'n item.
`keyboard`	boolean	`true`	Of die karrousel op sleutelbordgebeure moet reageer.
`pause`	string, boolean	`"hover"`	As dit op gestel is `"hover"`, onderbreek die fietsry van die karrousel aan `mouseenter`en hervat die fietsry van die karrousel aan `mouseleave`. As dit op gestel is `false`, sal dit nie onderbreek word deur oor die karrousel te beweeg nie. Op aanraking-geaktiveerde toestelle, wanneer dit op gestel is `"hover"`, sal fietsry `touchend`vir twee intervalle onderbreek (sodra die gebruiker klaar is met interaksie met die karrousel), voordat dit outomaties hervat word. Dit is bykomend tot die muisgedrag.
`ride`	string, boolean	`false`	As dit op gestel is `true`, sal die karrousel outomaties speel nadat die gebruiker die eerste item met die hand gebruik het. As dit op gestel is `"carousel"`, speel die karrousel outomaties wanneer dit gelaai word.
`touch`	boolean	`true`	Of die karrousel links/regs-swiep-interaksies op raakskermtoestelle moet ondersteun.
`wrap`	boolean	`true`	Of die karrousel aanhoudend moet fietsry of harde stops moet hê.

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

Jy kan byvoorbeeld 'n karrousel-instansie met die karrouselkonstruktor skep om met bykomende opsies te inisialiseer en deur items te begin fiets:

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

Metode	Beskrywing
`cycle`	Blaai deur die karrousel-items van links na regs.
`dispose`	Vernietig 'n element se karrousel. (Verwyder gestoorde data op die DOM-element)
`getInstance`	Statiese metode wat jou toelaat om die karrousel-instansie te kry wat geassosieer word met 'n DOM-element, jy kan dit so gebruik: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Statiese metode wat 'n karrousel-instansie wat met 'n DOM-element geassosieer word, terugstuur of 'n nuwe een skep ingeval dit nie geïnisialiseer is nie. Jy kan dit so gebruik: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Blaai na die volgende item. Keer terug na die oproeper voordat die volgende item gewys is (bv. voor die `slid.bs.carousel`gebeurtenis plaasvind).
`nextWhenVisible`	Moenie karrousel na volgende ry wanneer die bladsy nie sigbaar is nie of die karrousel of sy ouer nie sigbaar is nie. Keer terug na die beller voordat die teikenitem gewys is .
`pause`	Stop die karrousel om deur items te fiets.
`prev`	Blaai na die vorige item. Keer terug na die oproeper voordat die vorige item gewys is (bv. voor die `slid.bs.carousel`gebeurtenis plaasvind).
`to`	Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking). Keer terug na die oproeper voordat die teikenitem gewys is (bv. voor die `slid.bs.carousel`gebeurtenis plaasvind).

Gebeurtenisse

Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit. Albei geleenthede het die volgende bykomende eienskappe:

direction: Die rigting waarin die karrousel gly (óf "left"óf "right").
relatedTarget: Die DOM-element wat in plek geskuif word as die aktiewe item.
from: Die indeks van die huidige item
to: Die indeks van die volgende item

Alle karrouselgebeurtenisse word op die karrousel self afgevuur (dws by die <div class="carousel">).

Soort gebeurtenis	Beskrywing
`slid.bs.carousel`	Afgevuur wanneer die karrousel sy gly-oorgang voltooi het.
`slide.bs.carousel`	Vuur onmiddellik wanneer die `slide`instansiemetode aangeroep word.

const myCarousel = document.getElementById('myCarousel')

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

Karrousel

Hoe dit werk

Voorbeeld

Slegs skyfies

Met kontroles

Met aanwysers

Met byskrifte

Eerste skyfie etiket

Tweede skyfie-etiket

Derde skyfie-etiket

Crossfade

Individuele .carousel-iteminterval

Deaktiveer raakswiep

Donker variant

Eerste skyfie etiket

Tweede skyfie-etiket

Derde skyfie-etiket

Pasgemaakte oorgang

Sass

Veranderlikes

Gebruik

Via data-eienskappe

Via JavaScript

Opsies

Metodes

Asinchroniese metodes en oorgange

Gebeurtenisse

Individuele `.carousel-item`interval