Skip to main content

Global styles

Component styles

Carousels

Description

This page demonstrates the use of carousels in/for various components.

Fuctionality might vary depending on the styling & type of component & content options.

The carousel library we use is called 'swiper': https://swiperjs.com/. Owl carousel will be outfased.

Components with fixed carousel

  • Image carousel
  • There column carousel desktop (For displaying selected cards in a caorusel)

Component types with carousel option

  • Hero types
    • Hero multibox
    • Hero text box
  • Media boxes
  • There column carousel mobile (For displaying cards & info boxes in a caorusel)

Carousel options

  • Mandatory
    • Navigation dots
  • Optional
    • Prev-next arrows
    • Image aspect ratio (obs 4:5 is too tall and 16:5 is too low)
      • Default 3:2
      • Sqaure 1:1
      • HD/Video 16:9
      • None/auto
    • Effects
      • Slide
      • fade

Heros with carousel option

Media box with carousel option

Slide image
Slide image
Slide image

    Media box carousel

    Morbi tincidunt augue interdum velit euismod in pellentesque. Adipiscing tristique risus nec feugiat in fermentum. Orci nulla pellentesque dignissim enim sit amet venenatis. Luctus accumsan tortor posuere ac ut consequat. Sed vulputate mi sit amet mauris commodo.This is a link.

    Image carousel (New)

    Image description

    Swiper

    Image description
    Image description

    På baggrund af erfaringerne kan retningslinjerne blive evalueret. Teknik- og Miljøforvaltningen påpeger dog, at en effektiv håndhævelse og løbende evaluering af ordningen kræver, at der afsættes 1,5 mio. kr. til arbejdet i forbindelse med efterårets budgetforhandlinger.

    Image description
    Image description
      Image description

      Aspect ratio: Auto

      Image description

      På baggrund af erfaringerne kan retningslinjerne blive evalueret. Teknik- og Miljøforvaltningen påpeger dog, at en effektiv håndhævelse og løbende evaluering af ordningen kræver, at der afsættes 1,5 mio. kr. til arbejdet i forbindelse med efterårets budgetforhandlinger.

      Image description
      Image description

      1,5 mio. kr. til arbejdet i forbindelse med efterårets budgetforhandlinger.

      Image description
        Image description

        Aspect ratio: Default 3:2

        Image description
        Image description

        1,5 mio. kr. til arbejdet i forbindelse med efterårets budgetforhandlinger.

        Image description
        Image description
          Image description

          Aspect ratio: Sqaure 1:1

          Image description
          Image description
            Image description

            Aspect ratio: HD/video 16:9

            Image description
            Image description

              Three column carousel - Tablet down

              Swiper: Three column carousel (NOT DONE)

              Swiper: Three column carousel - Mobile only (NOT DONE)