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 ""
carouselType string [default, timeline] "default"
freeMode boolean false freeMode
slidesPerView number 1 SlidesPerView

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.

Default carousel

Omriss Kjeller flystripe
Sommerlig flybilde over Kjeller
Kjeller flyplass

Carousel free mode og 3 slides per view

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

Timeline carousel

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 
<h3>Default carousel</h3>

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

<h3>Carousel free mode og 3 slides per view</h3>
<lk-carousel container-id="2070492588" free-mode="true" slides-per-view="3" start-index="1">
    <div class="swiper-slide">
        <div class="textAndImage">
            <img alt="Kulturkvartalet biblioteket" 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" 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" 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>
    <div class="swiper-slide">
        <div class="textAndImage">
            <img alt="Kulturkvartalet biblioteket" 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" 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" 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>

<h3>Timeline carousel</h3>

<lk-carousel container-id="1638877148" carousel-type="timeline" start-index="2">
    <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?