nve-carousel

En karusell for å vise bilder eller annet valgfritt innhold i en serie. Nve-carousel støtter ikke propertien: orientation="vertical".

Arvet fra SlCarousel.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-carousel.

 

Se også nve-carousel-item som brukes inne i nve-carousel.

<nve-carousel pagination navigation>
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

Karusellen brukes til å vise innhold i en serie som brukerne kan klikke seg gjennom. Karusellen fyller vidden i elementet den er plassert i.

Eksempler

Navigering

Bruk navigation for å legge på navigerings-knapper på hver side av bildet i karusellen.

<nve-carousel navigation>
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

Numerisk visning av aktivt lysbilde

Bruk pagination-counter for å legge på en "aktiv / total" visning på elementene i karusellen.

<nve-carousel navigation pagination-counter>
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

Endre fargen på paginerings telleren ved å legge inn en inline style på --pagination-counter-color. Under er det brukt i en div for å vise eksempelet, men stylingen kan i praksis settes rett i nve-carousel.

<div style="--pagination-counter-color: red;">
  <nve-carousel navigation pagination-counter>
    <nve-carousel-item>
      <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
    </nve-carousel-item>
    <nve-carousel-item>
      <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
    </nve-carousel-item>
    <nve-carousel-item>
      <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
    </nve-carousel-item>
    <nve-carousel-item>
      <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
    </nve-carousel-item>
  </nve-carousel>
</div>

Det kan legges til en bakgrunnsfarge på paginerings-telleren. Endre bakgrunnsfargen ved å legge inn en inline style på --pagination-counter-bg-color. Under er det brukt i en div for å vise eksempelet, men stylingen kan i praksis settes rett i nve-carousel.

<div style="--pagination-counter-bg-color: lightgray;">
  <nve-carousel navigation pagination-counter>
    <nve-carousel-item>
      <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
    </nve-carousel-item>
    <nve-carousel-item>
      <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
    </nve-carousel-item>
    <nve-carousel-item>
      <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
    </nve-carousel-item>
    <nve-carousel-item>
      <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
    </nve-carousel-item>
  </nve-carousel>
</div>

Paginering

Bruk pagination for å legge på paginerings-knapper under bildekarusellen. Det er ikke anbefalt å bruke både pagination og pagination-counter sammen da det strider i mot design-mønstret.

<nve-carousel pagination>
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

Looping

Bruk loop for å kunne bla igjennom bildene fra start flere ganger.

<nve-carousel navigation pagination loop>
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

Horisontale og vertikale bilder sammen

Det er mulig å kombinere horistontalt og vertikalt innhold i karusellen, men dette endrer høyden på selve karusellen ettersom den går ut i fra det høyeste innholdet i karusellen.

<nve-carousel pagination navigation loop>
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/snoedekkeundersoekelse.jpg" alt="Snødekkeundersøkelse" />
  </nve-carousel-item>
</nve-carousel>

Bildetekst

Bruk description på nve-carousel-itemfor å legge til en bildetekst til hvert bilde om ønskelig. Det er mulig å bare ha bildetekst på noen av bildene.

<nve-carousel navigation pagination loop>
  <nve-carousel-item description="Transmisjonsnett i Sogn og Fjordane. Foto: Velaug Amalie Mook.">
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item description="Snømåling på Nigardsbreen.">
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item description="Tarhalsen fyr Sørøya. Foto: Stig Storheil.">
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
  <nve-carousel-item description="Snødekkeundersøkelse. Foto: Gustav Pless.">
    <img src="/assets/snoedekkeundersoekelse.jpg" alt="Snødekkeundersøkelse" />
  </nve-carousel-item>
</nve-carousel>

Miniatybilder

Bruk nve-carousel-thumbnail for å vise miniatyrbilder under karusellen. Definer en lik id på nve-carousel og nve-carousel-thumbnail for å koble komponentene sammen.

<nve-carousel navigation loop id="thumbnail">
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

<nve-carousel-thumbnail carouselId="thumbnail">
  <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
</nve-carousel-thumbnail>

Autoplay

Bruk autoplay til å rotere mellom bildene i karusellen automatisk. For å endre hvor lenge et lysbilde vises før det går videre, sett autoplay-interval til ønsket millisekunder. For best resultat, bruk loop-propertien når autoplay er aktivert. Autoplay vil settes på pause mens brukeren samhandler med karusellen.

<nve-carousel pagination loop autoplay>
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

Flere lysbilder per visning

Bruk slides-per-page for å vise flere lysbilder per visning i karusellen. Du kan også bruke slides-per-move attributtet for å gå frem mer enn ett lysbilde om gangen, hvis ønskelig.

<nve-carousel pagination navigation slides-per-page="2" slides-per-move="2">
  <nve-carousel-item>
    <img src="/assets/transmisjonsnett.jpg" alt="Transmisjonsnett" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/nigardsbreen.jpg" alt="Nigardsbreen" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/tarhalsen_fyr.jpg" alt="Tarhalsen fyr" />
  </nve-carousel-item>
  <nve-carousel-item>
    <img src="/assets/skogfjordvann.jpg" alt="Skogfjordvann" />
  </nve-carousel-item>
</nve-carousel>

Vise noe annet enn bilder

Du kan også legge andre ting enn bilder i nve-carousel-item.

<nve-carousel navigation>
  <nve-carousel-item>
    <div>
      <h1>Velg språk / choose language</h1>
      <br />
      <nve-select label="Språk/language">
        <nve-option value="valg1">Norsk</nve-option>
        <nve-option value="valg2">Engelsk</nve-option>
      </nve-select>
    </div>
  </nve-carousel-item>
  <nve-carousel-item>
    <div style="color: green">
      <h1>Du greide det!</h1>
      <p>Nå kan du:</p>
      <ul>
        <li>Finne deg noe godt å spise/drikke</li>
        <li>Lene deg tilbake</li>
        <li>Ta helg</li>
      </ul>
    </div>
  </nve-carousel-item>
</nve-carousel>

Vertikal scrolling

Bildekarusellen støtter ikke vertikal scrolling per nå.

Spor

Navn	Beskrivelse
(standard)	The carousel's main content, one or more `<sl-carousel-item>` elements.
next-icon	Optional next icon to use instead of the default. Works best with `<sl-icon>`.
previous-icon	Optional previous icon to use instead of the default. Works best with `<sl-icon>`.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-slide-change	SlCarousel	Emitted when the active slide changes.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
paginationCounter	boolean = false		Dersom denne er satt vises en teller av typen "1 / 4" på karusellen.
loop	boolean = false	SlCarousel	When set, allows the user to navigate the carousel in the same direction indefinitely.
navigation	boolean = false	SlCarousel	When set, show the carousel's navigation.
pagination	boolean = false	SlCarousel	When set, show the carousel's pagination indicators.
autoplay	boolean = false	SlCarousel	When set, the slides will scroll automatically when the user is not interacting with them.
autoplayInterval	number = 3000	SlCarousel	Specifies the amount of time, in milliseconds, between each automatic scroll.
slidesPerPage	number = 1	SlCarousel	Specifies how many slides should be shown at a given time.
slidesPerMove	number = 1	SlCarousel	Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page` greater than one. It can't be higher than `slides-per-page`.
orientation	'horizontal' | 'vertical' = 'horizontal'	SlCarousel	Specifies the orientation in which the carousel will lay out.
mouseDragging	boolean = false	SlCarousel	When set, it is possible to scroll through the slides by dragging them with the mouse.
scrollContainer	HTMLElement	SlCarousel
paginationContainer	HTMLElement	SlCarousel
activeSlide	number = 0	SlCarousel
scrolling	boolean = false	SlCarousel
dragging	boolean = false	SlCarousel

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handeSlideChange	event: CustomEvent
initializeSlides			SlCarousel
handleSlideChange			SlCarousel
updateSlidesSnap			SlCarousel
handleAutoplayChange			SlCarousel
previous	behavior: ScrollBehavior		SlCarousel	Move the carousel backward by `slides-per-move` slides.
next	behavior: ScrollBehavior		SlCarousel	Move the carousel forward by `slides-per-move` slides.
goToSlide	index: number behavior: ScrollBehavior		SlCarousel	Scrolls the carousel to the slide specified by `index`.

Deler

Navn	Beskrivelse
base	The carousel's internal wrapper.
scroll-container	The scroll container that wraps the slides.
pagination	The pagination indicators wrapper.
pagination-item	The pagination indicator.
pagination-item--active	Applied when the item is active.
navigation	The navigation wrapper.
navigation-button	The navigation button.
navigation-button--previous	Applied to the previous button.
navigation-button--next	Applied to the next button.

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--pagination-counter-color	Fargen på sidetellerteksten.
--pagination-counter-bg-color	Bakgrunnsfargen til pagineringstelleren.
--slide-gap	The space between each slide.
--aspect-ratio	The aspect ratio of each slide.
--scroll-hint	The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.