Carusel - Karusell carousel.

Struktur 

<lk-carousel>
  <div>
    <div>
      (slot/)
    </div>
  </div>
  <div></div>
  <div></div>
  <div></div>
</lk-carousel>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
containerId string ""
isProjectPlan boolean false
carouselType string [default, timeline] "default"

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* <slots /> området må inneholde alle kortene som skal brukes i karusellen, kortenes struktur er vesentlig for hva slags karusel det gjelder ( se markupen i eksemplene nederst )

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.


{# Carousel #}

Omriss Kjeller flystripe
Sommerlig flybilde over Kjeller
Kjeller flyplass

{# Carousel with captions #}

Kulturkvartalet biblioteket Henning Mongstad og Sølvi Tellefsen viser fram kjøkkenet som brukerne av biblioteket kan bruke
Kulturkvartalet biblioteket Ute er det en liten hage man kan smake på.
Kulturkvartalet biblioteket God plass ved vinduene hvis man vil slappe av med en god bok

{# Carousel as a timeline #}

Forslag til høringsuttalelse. Melding om justert omfang i fredningssaken for kjeller flyplass

Status:
Ferdig
Start:
15.01.2020
Mer informasjon

Ny sak

Status:
Underveis
Start:
November 2021
Slutt:
Desember 2021
Tekst som legges til 
<br>
{# Carousel #}
<br>
<br>

<lk-carousel container-id="1212010551">
    <div class="swiper-slide">
        <img alt="Omriss Kjeller flystripe" 
            srcset="https://v.imgi.no/yvtxmnxd6z-lkcp/w1920/Omriss%20Kjeller%20flystripe.jpg 1920w,
            https://v.imgi.no/yvtxmnxd6z-lkcp/w1600/Omriss%20Kjeller%20flystripe.jpg 1600w,
            https://v.imgi.no/yvtxmnxd6z-lkcp/w1366/Omriss%20Kjeller%20flystripe.jpg 1366w,
            https://v.imgi.no/yvtxmnxd6z-lkcp/w1024/Omriss%20Kjeller%20flystripe.jpg 1024w,
            https://v.imgi.no/yvtxmnxd6z-lkcp/w768/Omriss%20Kjeller%20flystripe.jpg 768w,
            https://v.imgi.no/yvtxmnxd6z-lkcp/w640/Omriss%20Kjeller%20flystripe.jpg 640w," 
            src="https://v.imgi.no/yvtxmnxd6z-lkcp/w640/Omriss%20Kjeller%20flystripe.jpg"
        >
    </div>

    <div class="swiper-slide">
        <img alt="Sommerlig flybilde over Kjeller " 
            srcset="https://v.imgi.no/2ulx6n8c8y-lkcp/w1920/Sommerlig%20flybilde%20over%20Kjeller%20.jpg 1920w,
            https://v.imgi.no/2ulx6n8c8y-lkcp/w1600/Sommerlig%20flybilde%20over%20Kjeller%20.jpg 1600w,
            https://v.imgi.no/2ulx6n8c8y-lkcp/w1366/Sommerlig%20flybilde%20over%20Kjeller%20.jpg 1366w,
            https://v.imgi.no/2ulx6n8c8y-lkcp/w1024/Sommerlig%20flybilde%20over%20Kjeller%20.jpg 1024w,
            https://v.imgi.no/2ulx6n8c8y-lkcp/w768/Sommerlig%20flybilde%20over%20Kjeller%20.jpg 768w,
            https://v.imgi.no/2ulx6n8c8y-lkcp/w640/Sommerlig%20flybilde%20over%20Kjeller%20.jpg 640w," 
            src="https://v.imgi.no/2ulx6n8c8y-lkcp/w640/Sommerlig%20flybilde%20over%20Kjeller%20.jpg"
        >
    </div>

    <div class="swiper-slide">
        <img alt="Kjeller flyplass" 
            srcset="https://v.imgi.no/r27qj25jkp-lkcp/w1920/Kjeller%20flyplass.jpg 1920w,
            https://v.imgi.no/r27qj25jkp-lkcp/w1600/Kjeller%20flyplass.jpg 1600w,
            https://v.imgi.no/r27qj25jkp-lkcp/w1366/Kjeller%20flyplass.jpg 1366w,
            https://v.imgi.no/r27qj25jkp-lkcp/w1024/Kjeller%20flyplass.jpg 1024w,
            https://v.imgi.no/r27qj25jkp-lkcp/w768/Kjeller%20flyplass.jpg 768w,
            https://v.imgi.no/r27qj25jkp-lkcp/w640/Kjeller%20flyplass.jpg 640w," 
            src="https://v.imgi.no/r27qj25jkp-lkcp/w640/Kjeller%20flyplass.jpg"
        >
    </div>
</lk-carousel>

<br>
{# Carousel with captions #}
<br>
<br>

<lk-carousel container-id="2070492588">
    <div class="swiper-slide">
        <div class="textAndImage">
            <img alt="Kulturkvartalet biblioteket" srcset="https://v.imgi.no/5ald4r7uc7-lkcp/w1920/Kulturkvartalet%20biblioteket.jpg 1920w,
                https://v.imgi.no/5ald4r7uc7-lkcp/w1600/Kulturkvartalet%20biblioteket.jpg 1600w,
                https://v.imgi.no/5ald4r7uc7-lkcp/w1366/Kulturkvartalet%20biblioteket.jpg 1366w,
                https://v.imgi.no/5ald4r7uc7-lkcp/w1024/Kulturkvartalet%20biblioteket.jpg 1024w,
                https://v.imgi.no/5ald4r7uc7-lkcp/w768/Kulturkvartalet%20biblioteket.jpg 768w,
                https://v.imgi.no/5ald4r7uc7-lkcp/w640/Kulturkvartalet%20biblioteket.jpg 640w," src="https://v.imgi.no/5ald4r7uc7-lkcp/w640/Kulturkvartalet%20biblioteket.jpg">
            <span> Henning Mongstad og Sølvi Tellefsen viser fram kjøkkenet som brukerne av biblioteket kan bruke </span>
        </div>
    </div>

    <div class="swiper-slide">
        <div class="textAndImage">
            <img alt="Kulturkvartalet biblioteket" srcset="https://v.imgi.no/plys7c2tza-lkcp/w1920/Kulturkvartalet%20biblioteket.jpg 1920w,
                https://v.imgi.no/plys7c2tza-lkcp/w1600/Kulturkvartalet%20biblioteket.jpg 1600w,
                https://v.imgi.no/plys7c2tza-lkcp/w1366/Kulturkvartalet%20biblioteket.jpg 1366w,
                https://v.imgi.no/plys7c2tza-lkcp/w1024/Kulturkvartalet%20biblioteket.jpg 1024w,
                https://v.imgi.no/plys7c2tza-lkcp/w768/Kulturkvartalet%20biblioteket.jpg 768w,
                https://v.imgi.no/plys7c2tza-lkcp/w640/Kulturkvartalet%20biblioteket.jpg 640w," src="https://v.imgi.no/plys7c2tza-lkcp/w640/Kulturkvartalet%20biblioteket.jpg">
            <span> Ute er det en liten hage man kan smake på. </span>
        </div>
    </div>
    <div class="swiper-slide">
        <div class="textAndImage">
            <img alt="Kulturkvartalet biblioteket" srcset="https://v.imgi.no/pp542bxp2r-lkcp/w1920/Kulturkvartalet%20biblioteket.jpg 1920w,
                https://v.imgi.no/pp542bxp2r-lkcp/w1600/Kulturkvartalet%20biblioteket.jpg 1600w,
                https://v.imgi.no/pp542bxp2r-lkcp/w1366/Kulturkvartalet%20biblioteket.jpg 1366w,
                https://v.imgi.no/pp542bxp2r-lkcp/w1024/Kulturkvartalet%20biblioteket.jpg 1024w,
                https://v.imgi.no/pp542bxp2r-lkcp/w768/Kulturkvartalet%20biblioteket.jpg 768w,
                https://v.imgi.no/pp542bxp2r-lkcp/w640/Kulturkvartalet%20biblioteket.jpg 640w," src="https://v.imgi.no/pp542bxp2r-lkcp/w640/Kulturkvartalet%20biblioteket.jpg">
            <span> God plass ved vinduene hvis man vil slappe av med en god bok </span>
        </div>
    </div>
</lk-carousel>

<br>
{# Carousel as a timeline #}
<br>
<br>

<lk-carousel container-id="1638877148" carousel-type="timeline" start-index="1">
    <div class="swiper-slide swiper-slide-timeline" data-name="complete">
        <div class="timeline__item-container">
            <div class="timeline__item timeline__item-custom timeline__item--complete">
                <p class="timeline__item__description">
                    Forslag til høringsuttalelse. Melding om justert omfang i fredningssaken for kjeller flyplass
                </p>
                <dl class="timeline__item__details">
                    <dt>Status:</dt>
                    <dd class="timeline__item__details__status-label">Ferdig</dd>
                    <dt>Start:</dt>
                    <dd>15.01.2020</dd>
                </dl>
                <div class="milestone__row">
                    <a class="link external--clean" href="https://opengov.360online.com/Meetings/LILLESTROMKOM/Meetings/Details/470767?agendaItemId=203510" title="Mer informasjon">Mer informasjon</a>
                </div>
            </div>
        </div>
    </div>

    <div class="swiper-slide swiper-slide-timeline" data-name="underway">
        <div class="timeline__item-container">
            <div class="timeline__item timeline__item-custom timeline__item--underway">
                <p class="timeline__item__description">
                    Ny sak
                </p>
                <dl class="timeline__item__details">
                    <dt>Status:</dt>
                    <dd class="timeline__item__details__status-label">Underveis</dd>
                    <dt>Start:</dt>
                    <dd>November 2021</dd>
                    <dt>Slutt:</dt>
                    <dd>Desember 2021</dd>
                </dl>
                <div class="milestone__row">
                    <a class="link external--clean" href="/avfall-og-gjenvinning/nar-hentes-avfallet/" title="Tekst som legges til">Tekst som legges til</a>
                </div>
            </div>
        </div>
    </div>
</lk-carousel>

Hvor finner jeg denne koden?