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

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.

Sørg for å angi en unik ID på .carouselfor valgfrie kontroller, spesielt hvis du bruker flere karuseller på en enkelt side.

Kun lysbilder

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Med kontroller

Legger til forrige og neste kontroll:

Tidligere Neste

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

Med indikatorer

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

Tidligere Neste

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>

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

Nulla vitae elit libero, a pharetra augue mollis interdum.

Andre lysbildeetikett

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tredje lysbildeetikett

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Tidligere Neste

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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. 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="".

Metoder

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

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

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