nve-carousel-item

Et karusellelement som representerer bilder eller annet valgfritt innhold i en karusell. Bruk propertien "description" for å legge på bildetekst under bildet. Anbefaler å bare godta liggende eller stående formater på bilder i karusellen for best layout.

Arvet fra SlCarouselItem.

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

 

Gå til nve-carousel for mer info om denne komponenten.

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

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>

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>

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>

Spor

Navn	Beskrivelse
(standard)	The carousel item's content..

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
description	string = ''		Brukes til å legge på beskrivelse på bildene.

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--aspect-ratio	The slide's aspect ratio. Inherited from the carousel by default.