Carusel - Karusell | Fleetwood designsystem

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

Default carousel

Karusell free modus med 3 slides per side

Henning Mongstad og Sølvi Tellefsen viser fram kjøkkenet som brukerne av biblioteket kan bruke

Ute er det en liten hage man kan smake på.

God plass ved vinduene hvis man vil slappe av med en god bok

Henning Mongstad og Sølvi Tellefsen viser fram kjøkkenet som brukerne av biblioteket kan bruke

Ute er det en liten hage man kan smake på.

God plass ved vinduene hvis man vil slappe av med en god bok

Tidslinje karusell

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 class="lk-heading" data-size="md">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 class="lk-heading" data-size="md">Karusell free modus med 3 slides per side</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 class="lk-heading" data-size="md">Tidslinje karusell</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>