Karusell

En lysbildefremvisningskomponent for å sykle gjennom elementer – bilder eller lysbilder med tekst – som en karusell.

Hvordan det fungerer

Karusellen er en lysbildefremvisning for å sykle gjennom en rekke innhold, bygget med CSS 3D-transformasjoner og litt JavaScript. Det fungerer med en serie bilder, tekst eller egendefinerte markeringer. Den inkluderer også støtte for forrige/neste kontroller og indikatorer.

I nettlesere der Page Visibility API støttes, vil karusellen unngå å skli når nettsiden ikke er synlig for brukeren (for eksempel når nettleserfanen er inaktiv, nettleservinduet er minimert osv.).

Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesøket. Se delen for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .

Vær oppmerksom på at nestede karuseller ikke støttes, og karuseller er generelt sett ikke i samsvar med tilgjengelighetsstandarder.

Til slutt, hvis du bygger JavaScript fra kilden, kreverutil.js det .

Eksempel

Karuseller normaliserer ikke lysbildedimensjonene automatisk. Som sådan kan det hende du må bruke ekstra verktøy eller tilpassede stiler for å tilpasse innholdet. Mens karuseller støtter forrige/neste kontroller og indikatorer, er de ikke eksplisitt påkrevd. Legg til og tilpass etter eget ønske.

Klassen .activemå legges til et av lysbildene ellers vil ikke karusellen være synlig. Sørg også for å angi en unik idpå .carouselfor valgfrie kontroller, spesielt hvis du bruker flere karuseller på en enkelt side. Kontroll- og indikatorelementer må ha et data-targetattributt (eller hreffor lenker) som samsvarer idmed .carouselelementet.

Kun lysbilder

Her er en karusell med bare lysbilder. Legg merke til tilstedeværelsen av .d-blockog .w-100på karusellbildene for å forhindre nettleserstandardbildejustering.

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

Med kontroller

Legger til forrige og neste kontroll. Vi anbefaler å bruke <button>elementer, men du kan også bruke <a>elementer med 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>

Med indikatorer

Du kan også legge til indikatorene i karusellen, sammen med kontrollene, også.

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

Med bildetekster

Legg enkelt til bildetekster til lysbildene dine med .carousel-captionelementet i en hvilken som helst .carousel-item. De kan enkelt skjules på mindre visningsporter, som vist nedenfor, med valgfrie skjermverktøy . Vi skjuler dem først med .d-noneog bringer dem tilbake på mellomstore enheter med .d-md-block.

Første lysbildeetikett

Noe representativt plassholderinnhold for det første lysbildet.

Andre lysbildeetikett

Noe representativt plassholderinnhold for det andre lysbildet.

Tredje lysbildeetikett

Noe representativt plassholderinnhold for det tredje lysbildet.

<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

Legg .carousel-fadetil i karusellen din for å animere lysbilder med en uttoningsovergang i stedet for et lysbilde. Avhengig av karusellinnholdet ditt (f.eks. lysbilder med bare tekst), kan det være lurt å legge til .bg-bodyeller en egendefinert CSS til .carousel-items for riktig kryssfading.

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

Individuelt `.carousel-item`intervall

Legg data-interval=""til en .carousel-itemfor å endre hvor lang tid det skal gå mellom automatisk sykling til neste 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>

Deaktiver berøringssveiping

Karuseller støtter sveiping til venstre/høyre på enheter med berøringsskjerm for å flytte mellom lysbildene. Dette kan deaktiveres ved å bruke data-touchattributtet. Eksemplet nedenfor inkluderer heller ikke data-rideattributtet og har data-interval="false"derfor ikke automatisk avspilling.

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

Bruk

Via dataattributter

Bruk dataattributter for enkelt å kontrollere posisjonen til karusellen. data-slidegodtar nøkkelordene preveller next, som endrer lysbildeposisjonen i forhold til gjeldende posisjon. Alternativt kan du bruke data-slide-tofor å sende en rå lysbildeindeks til karusellen data-slide-to="2", som flytter lysbildeposisjonen til en bestemt indeks som begynner med 0.

Attributtet brukes til å merke en karusell som animasjon fra og data-ride="carousel"med sideinnlasting. Hvis du ikke bruker data-ride="carousel"å initialisere karusellen din, må du initialisere den selv. Den kan ikke brukes i kombinasjon med (overflødig og unødvendig) eksplisitt JavaScript-initialisering av samme karusell.

Via JavaScript

Ring karusell manuelt med:

$('.carousel').carousel()

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-, som i data-interval="".

Navn	Type	Misligholde	Beskrivelse
intervall	Antall	5000	Tiden det tar mellom automatisk sykling av et element. Hvis `false`, vil ikke karusellen gå automatisk.
tastatur	boolsk	ekte	Om karusellen skal reagere på tastaturhendelser.
pause	streng \| boolsk	'sveve'	Hvis satt til `'hover'`, pauser syklingen av karusellen på `mouseenter`og fortsetter syklingen av karusellen på `mouseleave`. Hvis satt til `false`, vil det ikke settes på pause ved å holde musepekeren over karusellen. På berøringsaktiverte enheter, når satt til `'hover'`, vil sykling settes på pause `touchend`(når brukeren er ferdig med å samhandle med karusellen) i to intervaller, før den gjenopptas automatisk. Merk at dette kommer i tillegg til museoppførselen ovenfor.
ri	streng	falsk	Automatisk spiller av karusellen etter at brukeren manuelt går gjennom det første elementet. Hvis satt til `'carousel'`, spiller karusellen automatisk ved lasting.
pakke inn	boolsk	ekte	Om karusellen skal sykle kontinuerlig eller ha harde stopp.
ta på	boolsk	ekte	Om karusellen skal støtte venstre/høyre sveipeinteraksjoner på enheter med berøringsskjerm.

Metoder

Asynkrone metoder og overganger

Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .

Se vår JavaScript-dokumentasjon for mer informasjon .

`.carousel(options)`

Initialiserer karusellen med valgfrie alternativer objectog begynner å sykle gjennom gjenstander.

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

Bla gjennom karusellelementene fra venstre til høyre.

`.carousel('pause')`

Stopper karusellen fra å sykle gjennom gjenstander.

`.carousel(number)`

Sykler karusellen til en bestemt ramme (0-basert, ligner på en matrise). Går tilbake til den som ringer før målelementet har blitt vist (dvs. før slid.bs.carouselhendelsen inntreffer).

`.carousel('prev')`

Går til forrige element. Går tilbake til den som ringer før forrige element har blitt vist (dvs. før slid.bs.carouselhendelsen inntreffer).

`.carousel('next')`

Går til neste element. Går tilbake til den som ringer før neste element har blitt vist (dvs. før slid.bs.carouselhendelsen inntreffer).

`.carousel('dispose')`

Ødelegger et elements karusell.

`.carousel('nextWhenVisible')`

Ikke sykle karusellen til neste når siden ikke er synlig eller karusellen eller dens overordnede ikke er synlig. Går tilbake til den som ringer før neste element har blitt vist (dvs. før slid.bs.carouselhendelsen inntreffer).

`.carousel('to')`

Sykler karusellen til en bestemt ramme (0-basert, ligner på en matrise). Går tilbake til den som ringer før neste element har blitt vist (dvs. før slid.bs.carouselhendelsen inntreffer).

arrangementer

Bootstraps karusellklasse avslører to hendelser for å koble til karusellfunksjonalitet. Begge arrangementene har følgende tilleggsegenskaper:

direction: Retningen som karusellen glir (enten "left"eller "right").
relatedTarget: DOM-elementet som skyves på plass som det aktive elementet.
from: Indeksen til gjeldende element
to: Indeksen til neste element

Alle karusellbegivenheter skytes mot selve karusellen (dvs. ved <div class="carousel">).

Hendelsestype	Beskrivelse
slide.bs.karusell	Denne hendelsen utløses umiddelbart når `slide`instansmetoden påkalles.
slide.bs.karusell	Denne hendelsen utløses når karusellen har fullført lysbildeovergangen.

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

Endre overgangsvarigheten

Overgangsvarigheten til .carousel-itemkan endres med $carousel-transitionSass-variabelen før kompilering eller tilpassede stiler hvis du bruker den kompilerte CSS. Hvis flere overganger brukes, sørg for at transformasjonsovergangen er definert først (f.eks. transition: transform 2s ease, opacity .5s ease-out).