JanMiksovsky/carousel.html

## carousel.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix Carousel with closed shadow root</title>

    <link rel="stylesheet" href="https://component.kitchen/demos/demos.css" />
    <script type="module">
      import PlainCarousel from "https://component.kitchen/src/plain/PlainCarousel.js";
      import { shadowRootMode } from "https://component.kitchen/src/base/internal.js";

      export default class TestCarousel extends PlainCarousel {
        get [shadowRootMode]() {
          return "closed";
        }
      }

      customElements.define("test-carousel", TestCarousel);
    </script>

    <style>
      html {
        height: 100%;
      }

      body {
        background: black;
        height: 100%;
        padding: 0;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen">
      <style>
        #sampleCarousel {
          background: black;
          flex: 1;
          max-height: 100%;
        }

        #sampleCarousel .carouselItem {
          display: inline-block;
          height: 100%;
          object-fit: contain;
          vertical-align: middle;
          width: 100%;
        }
      </style>
      <test-carousel id="sampleCarousel" aria-label="Nature scenes">
        <img
          class="carouselItem"
          src="https://component.kitchen/demos/images/image01.jpg"
          alt="Mountain lake"
        />
        <img
          class="carouselItem"
          src="https://component.kitchen/demos/images/image02.jpg"
          alt="Terraced farm"
        />
        <img
          class="carouselItem"
          src="https://component.kitchen/demos/images/image03.jpg"
          alt="Winter trees"
        />
        <img
          class="carouselItem"
          src="https://component.kitchen/demos/images/image04.jpg"
          alt="Forest river"
        />
        <img
          class="carouselItem"
          src="https://component.kitchen/demos/images/image05.jpg"
          alt="Red panda"
        />
      </test-carousel>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>Elix Carousel with closed shadow root</title>

	<link rel="stylesheet" href="https://component.kitchen/demos/demos.css" />
	<script type="module">
	import PlainCarousel from "https://component.kitchen/src/plain/PlainCarousel.js";
	import { shadowRootMode } from "https://component.kitchen/src/base/internal.js";

	export default class TestCarousel extends PlainCarousel {
	get [shadowRootMode]() {
	return "closed";
	}
	}

	customElements.define("test-carousel", TestCarousel);
	</script>

	<style>
	html {
	height: 100%;
	}

	body {
	background: black;
	height: 100%;
	padding: 0;
	}
	</style>
	</head>

	<body role="main">
	<div class="demo fullScreen">
	<style>
	#sampleCarousel {
	background: black;
	flex: 1;
	max-height: 100%;
	}

	#sampleCarousel .carouselItem {
	display: inline-block;
	height: 100%;
	object-fit: contain;
	vertical-align: middle;
	width: 100%;
	}
	</style>
	<test-carousel id="sampleCarousel" aria-label="Nature scenes">
	<img
	class="carouselItem"
	src="https://component.kitchen/demos/images/image01.jpg"
	alt="Mountain lake"
	/>
	<img
	class="carouselItem"
	src="https://component.kitchen/demos/images/image02.jpg"
	alt="Terraced farm"
	/>
	<img
	class="carouselItem"
	src="https://component.kitchen/demos/images/image03.jpg"
	alt="Winter trees"
	/>
	<img
	class="carouselItem"
	src="https://component.kitchen/demos/images/image04.jpg"
	alt="Forest river"
	/>
	<img
	class="carouselItem"
	src="https://component.kitchen/demos/images/image05.jpg"
	alt="Red panda"
	/>
	</test-carousel>
	</div>
	</body>
	</html>