Carousel

In slideshow-komponint foar it fytsen troch eleminten - ôfbyldings of dia's fan tekst - lykas in karrousel.

Op dizze side

Hoe't it wurket

De karrousel is in diashow foar it fytsen troch in searje ynhâld, boud mei CSS 3D-transformaasjes en in bytsje JavaScript. It wurket mei in searje ôfbyldings, tekst, as oanpaste markup. It omfettet ek stipe foar foarige / folgjende kontrôles en yndikatoaren.

Yn browsers dêr't de Page Visibility API wurdt stipe, sil de karrousel it glydzjen foarkomme as de webside net sichtber is foar de brûker (lykas as de blêderljepper ynaktyf is, it browserfinster wurdt minimalisearre, ensfh.).

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Wês asjebleaft bewust dat nestele karrousels net wurde stipe, en karrousels binne oer it algemien net foldogge oan tagonklikensnoarmen.

Foarbyld

Carousels normalisearje diadimensjes net automatysk. As sadanich moatte jo miskien ekstra nutsbedriuwen of oanpaste stilen brûke om ynhâld op passende grutte te meitsjen. Wylst karrousels foarige / folgjende kontrôles en yndikatoaren stypje, binne se net eksplisyt ferplicht. Foegje en oanpasse as jo goed fine.

De .activeklasse moat tafoege wurde oan ien fan de dia's oars is de karrousel net sichtber. Soargje der ek foar dat jo in unyk ynstelle idop 'e .carouselfoar opsjonele kontrôles, foaral as jo meardere karrousels op ien side brûke. Kontrôle- en yndikatoreleminten moatte in data-bs-targetattribút hawwe (as hreffoar keppelings) dy't oerienkomt mei de idfan it .carouselelemint.

Allinnich slides

Hjir is in karrousel mei allinich dia's. Notysje de oanwêzigens fan 'e .d-blocken .w-100op carouselôfbyldings om blêder standertôfbyldingsôfstimming te foarkommen.

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>

Mei kontrôles

It tafoegjen fan de foarige en folgjende kontrôles. Wy riede oan om <button>eleminten te brûken, mar jo kinne ek <a>eleminten brûke mei 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>

Mei yndikatoaren

Jo kinne ek de yndikatoaren tafoegje oan 'e karrousel, neist de kontrôles, ek.

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>

Mei ûnderskriften

Foegje maklik titels ta oan jo dia's mei it .carousel-captionelemint yn elke .carousel-item. Se kinne maklik wurde ferburgen op lytsere viewports, lykas hjirûnder werjûn, mei opsjonele display-hulpprogramma's . Wy ferbergje se yn earste ynstânsje mei .d-noneen bringe se werom op middelgrutte apparaten mei .d-md-block.

Earste slide label

Guon represintative plakhâlder ynhâld foar de earste dia.

Twadde slide label

Guon represintative plakhâlder ynhâld foar de twadde dia.

Tredde slide label

Guon represintative plakhâlder ynhâld foar de tredde slide.

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

Foegje .carousel-fadeoan jo karrousel ta om dia's te animearjen mei in fade-oergong ynstee fan in dia. Ofhinklik fan jo karrouselynhâld (bygelyks dia's allinich foar tekst), kinne jo .bg-bodyin oanpaste CSS tafoegje oan 'e .carousel-items foar goede 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>

Yndividueel `.carousel-item`ynterval

Taheakje data-bs-interval=""oan in .carousel-itemom de tiid te feroarjen om te fertrage tusken automatysk fytsen nei it folgjende item.

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>

Skeakelje touch swiping út

Carousels stypje swipe lofts / rjochts op touchscreen-apparaten om te ferpleatsen tusken dia's. Dit kin útskeakele wurde mei it data-bs-touchattribút. It foarbyld hjirûnder omfettet ek it data-bs-rideattribút net, sadat it net autoplayet.

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>

Dark fariant

Taheakje .carousel-darkoan 'e .carouselfoar donkerdere kontrôles, yndikatoaren en titels. Kontrôles binne omkeard fan har standert wite filling mei it filterCSS-eigenskip. Byskriften en kontrôles hawwe ekstra Sass fariabelen dy't oanpasse de coloren background-color.

Earste slide label

Guon represintative plakhâlder ynhâld foar de earste dia.

Twadde slide label

Guon represintative plakhâlder ynhâld foar de twadde dia.

Tredde slide label

Guon represintative plakhâlder ynhâld foar de tredde slide.

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>

Oanpaste oergong

De oergongsdoer fan .carousel-itemkin feroare wurde mei de $carousel-transition-durationSass-fariabele foardat jo kompilearje of oanpaste stilen as jo de kompilearre CSS brûke. As meardere transysjes wurde tapast, soargje derfoar dat de transformaasje-oergong earst definiearre is (bgl transition: transform 2s ease, opacity .5s ease-out.).

Sass

Fariabelen

Fariabelen foar 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`)

Fariabelen foar de tsjustere karrousel :

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

Gebrûk

Fia data attributen

Brûk gegevensattributen om de posysje fan 'e karrousel maklik te kontrolearjen. data-bs-slideakseptearret de kaaiwurden prevof next, dy't de slideposysje feroaret relatyf oan syn hjoeddeistige posysje. As alternatyf, brûk data-bs-slide-toom in rûge slide-yndeks troch te jaan oan de karrousel data-bs-slide-to="2", dy't de slideposysje ferpleatst nei in bepaalde yndeks dy't begjint mei 0.

It data-bs-ride="carousel"attribút wurdt brûkt om in karrousel te markearjen as animaasje te begjinnen by it laden fan siden. As jo net brûke data-bs-ride="carousel"om jo karrousel te inisjalisearjen, moatte jo it sels inisjalisearje. It kin net brûkt wurde yn kombinaasje mei (oerstallige en net nedich) eksplisite JavaSkript inisjalisaasje fan deselde carousel.

Fia JavaScript

Rop karrousel manuell mei:

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

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Namme	Type	Standert	Beskriuwing
`interval`	nûmer	`5000`	De hoemannichte tiid om te fertrage tusken it automatysk fytsen fan in item.
`keyboard`	boolean	`true`	Oft de karrousel moat reagearje op toetseboerdeveneminten.
`pause`	string, boolean	`"hover"`	As ynsteld op `"hover"`, stopet it fytsen fan 'e karrousel oan `mouseenter`en ferfetsje it fytsen fan' e karrousel op `mouseleave`. As ynsteld op `false`, sil it hoverjen oer de karrousel it net ûnderbrekke. Op touch-ynskeakele apparaten, as ynsteld op `"hover"`, sil it fytsen ûnderbrekke `touchend`(ienris de brûker klear is mei ynteraksje mei de karrousel) foar twa yntervallen, foardat it automatysk opnij wurdt. Dit is neist it mûsgedrach.
`ride`	string, boolean	`false`	As ynsteld op `true`, spilet de karrousel automatysk neidat de brûker it earste item mei de hân fytst. As ynsteld op `"carousel"`, spilet de karrousel automatysk by laden.
`touch`	boolean	`true`	Oft de karrousel links/rjochts swipe-ynteraksjes op touchscreen-apparaten moat stypje.
`wrap`	boolean	`true`	Oft de karrousel kontinu fytse moat of hurde stops hawwe.

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

Jo kinne bygelyks in carrousel-eksimplaar meitsje mei de carousel-konstruktor om te inisjalisearjen mei ekstra opsjes en begjinne te fytsen troch items:

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

Metoade	Beskriuwing
`cycle`	Cycles troch de karrousel items fan links nei rjochts.
`dispose`	Ferneatiget de karrousel fan in elemint. (Ferwidert bewarre gegevens op it DOM-elemint)
`getInstance`	Statyske metoade wêrmei jo de karrousel-eksimplaar te krijen assosjearre mei in DOM-elemint, jo kinne it sa brûke: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Statyske metoade dy't in karrousel-eksimplaar werombringt ferbûn oan in DOM-elemint of in nij oanmeitsje foar it gefal dat it net inisjalisearre is. Jo kinne it sa brûke: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Cycles nei it folgjende item. Keart werom nei de beller foardat it folgjende item is toand (bgl. foardat it `slid.bs.carousel`barren plakfynt).
`nextWhenVisible`	Fier de karrousel net nei de folgjende as de side net sichtber is of de karrousel of syn âlder net sichtber is. Keart werom nei de beller foardat it doelitem is toand .
`pause`	Stopt de karrousel fan it fytsen troch items.
`prev`	Cycles nei it foarige item. Keart werom nei de beller foardat it foarige item is toand (bgl. foardat it `slid.bs.carousel`barren plakfynt).
`to`	Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array). Keart werom nei de beller foardat it doelitem werjûn is (bgl. foardat it `slid.bs.carousel`barren plakfynt).

Eveneminten

De karrouselklasse fan Bootstrap bleatstelt twa eveneminten foar heakjen oan karrouselfunksjonaliteit. Beide eveneminten hawwe de folgjende ekstra eigenskippen:

direction: De rjochting wêryn't de karrousel glydt (of "left"of "right").
relatedTarget: It DOM-elemint dat op syn plak wurdt glide as it aktive item.
from: De yndeks fan it aktuele item
to: De yndeks fan it folgjende item

Alle karrouseleveneminten wurde op de karrousel sels ûntslein (dus by de <div class="carousel">).

Event type	Beskriuwing
`slid.bs.carousel`	Untslein as de karrousel syn slide-oergong foltôge hat.
`slide.bs.carousel`	Fires fuortendaliks as de `slide`eksimplaarmetoade wurdt oproppen.

const myCarousel = document.getElementById('myCarousel')

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

Carousel

Hoe't it wurket

Foarbyld

Allinnich slides

Mei kontrôles

Mei yndikatoaren

Mei ûnderskriften

Earste slide label

Twadde slide label

Tredde slide label

Crossfade

Yndividueel .carousel-itemynterval

Skeakelje touch swiping út

Dark fariant

Earste slide label

Twadde slide label

Tredde slide label

Oanpaste oergong

Sass

Fariabelen

Gebrûk

Fia data attributen

Fia JavaScript

Opsjes

Metoaden

Asynchrone metoaden en transysjes

Eveneminten

Yndividueel `.carousel-item`ynterval