Opening carousel

Standalone component.
Has no background color itself. Place this component inside a deck that has a background color.
Is composed of a list of content. The opening carousel is used to show opening hours. Each list item will be a 'slide' in the carousel.

Will always show the first item in bold, and with a different text.
Uses Owl Carousel

Opening carousel

Component status: WIP

Standalone component.
Has no background color itself. Place this component inside a deck that has a background color.
Is composed of a list of content. The opening carousel is used to show opening hours. Each list item will be a 'slide' in the carousel.

Will always show the first item in bold, and with a different text.
Uses Owl Carousel

  • Åben
    I dag
    10 - 20
  • Tirsdag
    2. Nov
    10 - 20
  • Onsdag
    3. Nov
    10 - 20
  • Torsdag
    4. Nov
    10 - 20
  • Fredag
    5. Nov
    10 - 20
  • Lørdag
    6. Nov
    10 - 20
  • Søndag
    7. Nov
    10 - 20
  • Mandag
    8. Nov
    10 - 20
  • Tirsdag
    9. Nov
    10 - 20
  • Onsdag
    10. Nov
    10 - 20
  • Torsdag
    11. Nov
    10 - 20
  • Fredag
    12. Nov
    10 - 20
  • Lørdag
    13. Nov
    10 - 20
  • Søndag
    14. Nov
    10 - 20
  • Mandag
    15. Nov
    10 - 20
  • Tirsdag
    16. Nov
    10 - 20
  • Onsdag
    17. Nov
    10 - 20
  • Torsdag
    18. Nov
    10 - 20
  • Fredag
    19. Nov
    10 - 20
  • Lørdag
    20. Nov
    10 - 20
  • Søndag
    21. Nov
    10 - 20
  • Mandag
    22. Nov
    10 - 20
  • Tirsdag
    23. Nov
    10 - 20
  • Onsdag
    24. Nov
    10 - 20
  • Torsdag
    25. Nov
    10 - 20
  • Fredag
    26. Nov
    10 - 20
  • Lørdag
    27. Nov
    10 - 20
  • Søndag
    28. Nov
    10 - 20
  • Mandag
    29. Nov
    10 - 20
  • Tirsdag
    30. Nov
    10 - 20
  • Onsdag
    1. Dec
    10 - 20
  • Torsdag
    2. Dec
    10 - 20
  • Fredag
    3. Dec
    10 - 20
  • Lørdag
    4. Dec
    10 - 20
  • Søndag
    5. Dec
    10 - 20
 
<ul class="opening-owl-carousel owl-carousel owl-theme">

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day bold">Åben</div>
			<div class="openinghours__date bold">I dag</div>
			<div class="openingcarousel__hours bold">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Tirsdag</div>
			<div class="openinghours__date">2. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Onsdag</div>
			<div class="openinghours__date">3. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Torsdag</div>
			<div class="openinghours__date">4. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Fredag</div>
			<div class="openinghours__date">5. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Lørdag</div>
			<div class="openinghours__date">6. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Søndag</div>
			<div class="openinghours__date">7. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Mandag</div>
			<div class="openinghours__date">8. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Tirsdag</div>
			<div class="openinghours__date">9. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Onsdag</div>
			<div class="openinghours__date">10. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Torsdag</div>
			<div class="openinghours__date">11. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Fredag</div>
			<div class="openinghours__date">12. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Lørdag</div>
			<div class="openinghours__date">13. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Søndag</div>
			<div class="openinghours__date">14. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Mandag</div>
			<div class="openinghours__date">15. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Tirsdag</div>
			<div class="openinghours__date">16. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Onsdag</div>
			<div class="openinghours__date">17. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Torsdag</div>
			<div class="openinghours__date">18. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Fredag</div>
			<div class="openinghours__date">19. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Lørdag</div>
			<div class="openinghours__date">20. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Søndag</div>
			<div class="openinghours__date">21. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Mandag</div>
			<div class="openinghours__date">22. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Tirsdag</div>
			<div class="openinghours__date">23. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Onsdag</div>
			<div class="openinghours__date">24. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Torsdag</div>
			<div class="openinghours__date">25. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Fredag</div>
			<div class="openinghours__date">26. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Lørdag</div>
			<div class="openinghours__date">27. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Søndag</div>
			<div class="openinghours__date">28. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Mandag</div>
			<div class="openinghours__date">29. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Tirsdag</div>
			<div class="openinghours__date">30. Nov</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Onsdag</div>
			<div class="openinghours__date">1. Dec</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Torsdag</div>
			<div class="openinghours__date">2. Dec</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Fredag</div>
			<div class="openinghours__date">3. Dec</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Lørdag</div>
			<div class="openinghours__date">4. Dec</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

	<li class="opening-owl-carousel__item">
		<div class="openinghours__block">
			<div class="openinghours__day">Søndag</div>
			<div class="openinghours__date">5. Dec</div>
			<div class="openingcarousel__hours">10 - 20</div>
		</div>
	</li>

</ul>
Se mere
Developer notes

Feed it an array of objects

Still WIP, before figuring out if "day" should be included or not.

const carouselSlides = [
    {
        "day": "Monday" // Evt. 
        "date": "1. okt",
        "time": "10 - 20"
    },
    {
        "date": "2. okt",
        "time": "10 - 20"
    },
    {
        "date": "3. okt",
        "time": "10 - 20"
    },
    /* ... */
]
 
Sorry Captain, no matching results found for your input.. :(

[title]

[results]
[name]