queerviolet/carousel.html

## carousel.html
<!doctype html>
<html>
  <head>
    <script src=carousel.js></script>
    <style>
      body, html {
        margin: 0;
        padding: 0;
        background: black;
      }

      /* functional styling */
      image-carousel {
        display: block;
        margin: 0; padding: 0;
      }

      image-carousel > * {
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        z-index: -1;
        transition: opacity 2000ms;
      }

      image-carousel > .carousel-item-visible {
        opacity: 1;
        z-index: 1;
      }

      /* appearance */
      image-carousel {
        height: 100%;
        background: black;
      }

      image-carousel > li {
        display: flex;
        flex-direction: vertical;
      }

      image-carousel img {
        width: 100%;
        display: table;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <image-carousel>
      <li><img src="imgs/at the foot of truth and beauty.jpg">
      <li><img src="imgs/church on firesong.jpg">
      <li><img src="imgs/deep in the guangxi province of china.jpg">
      <li><img src="imgs/forest path.jpg">
      <li><img src="imgs/howl's moving castle.jpg">
      <li><img src="imgs/kodama.jpg">
      <li><img src="imgs/the ceiling.jpg">
      <li><img src="imgs/the dock in the desert.jpg">
      <li><img src="imgs/the infinity of china.jpg">
      <li><img src="imgs/the secret lair of jules verne.jpg">
      <li><img src="imgs/trey ratcliff - new york - inception.jpg">
      <li><img src="imgs/trey-ratcliff-china-2013-acbd.jpg">
    </image-carousel>
  </body>
</html>

## carousel.js
function Carousel(list) {
  this.list = list;
  this.current = list.lastElementChild;
  this.flip = this.flip.bind(this);
  this.flip();
}

Carousel.prototype.flip = function() {
  this.current.classList.remove('carousel-item-visible');
  this.current = this.current.nextElementSibling || this.list.firstElementChild;
  this.current.classList.add('carousel-item-visible');
  setTimeout(this.flip, this.list.dataset.delay * 1 || 2000);
};

document.addEventListener('DOMContentLoaded', function() {
  var carousels = document.getElementsByClassName('carousel');
  var i = carousels.length;
  while (--i >= 0) {
    c = new Carousel(carousels[i]);
  }
});

/************/

// carouselProto < HTMLElement
var carouselProto = Object.create(HTMLElement.prototype);

// carouselProto.createdCallback = function() { }
// carouselProto.attributeChangedCallback = function(attr, old, newVal) { }
// carouselProto.detachedCallback = function() { }

carouselProto.attachedCallback = function() {
  this.current = this.lastElementChild;
  this.flip = this.flip.bind(this);
  this.flip();
};

carouselProto.flip = function() {
  this.current.classList.remove('carousel-item-visible');
  this.current = this.current.nextElementSibling || this.firstElementChild;
  this.current.classList.add('carousel-item-visible');
  setTimeout(this.flip, this.dataset.delay * 1 || 2000);
};

document.registerElement('image-carousel', {prototype: carouselProto});
	<!doctype html>
	<html>
	<head>
	<script src=carousel.js></script>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	background: black;
	}

	/* functional styling */
	image-carousel {
	display: block;
	margin: 0; padding: 0;
	}

	image-carousel > * {
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
	z-index: -1;
	transition: opacity 2000ms;
	}

	image-carousel > .carousel-item-visible {
	opacity: 1;
	z-index: 1;
	}

	/* appearance */
	image-carousel {
	height: 100%;
	background: black;
	}

	image-carousel > li {
	display: flex;
	flex-direction: vertical;
	}

	image-carousel img {
	width: 100%;
	display: table;
	margin: auto;
	}
	</style>
	</head>
	<body>
	<image-carousel>
	<li><img src="imgs/at the foot of truth and beauty.jpg">
	<li><img src="imgs/church on firesong.jpg">
	<li><img src="imgs/deep in the guangxi province of china.jpg">
	<li><img src="imgs/forest path.jpg">
	<li><img src="imgs/howl's moving castle.jpg">
	<li><img src="imgs/kodama.jpg">
	<li><img src="imgs/the ceiling.jpg">
	<li><img src="imgs/the dock in the desert.jpg">
	<li><img src="imgs/the infinity of china.jpg">
	<li><img src="imgs/the secret lair of jules verne.jpg">
	<li><img src="imgs/trey ratcliff - new york - inception.jpg">
	<li><img src="imgs/trey-ratcliff-china-2013-acbd.jpg">
	</image-carousel>
	</body>
	</html>
	function Carousel(list) {
	this.list = list;
	this.current = list.lastElementChild;
	this.flip = this.flip.bind(this);
	this.flip();
	}

	Carousel.prototype.flip = function() {
	this.current.classList.remove('carousel-item-visible');
	this.current = this.current.nextElementSibling \|\| this.list.firstElementChild;
	this.current.classList.add('carousel-item-visible');
	setTimeout(this.flip, this.list.dataset.delay * 1 \|\| 2000);
	};

	document.addEventListener('DOMContentLoaded', function() {
	var carousels = document.getElementsByClassName('carousel');
	var i = carousels.length;
	while (--i >= 0) {
	c = new Carousel(carousels[i]);
	}
	});

	/************/

	// carouselProto < HTMLElement
	var carouselProto = Object.create(HTMLElement.prototype);

	// carouselProto.createdCallback = function() { }
	// carouselProto.attributeChangedCallback = function(attr, old, newVal) { }
	// carouselProto.detachedCallback = function() { }

	carouselProto.attachedCallback = function() {
	this.current = this.lastElementChild;
	this.flip = this.flip.bind(this);
	this.flip();
	};

	carouselProto.flip = function() {
	this.current.classList.remove('carousel-item-visible');
	this.current = this.current.nextElementSibling \|\| this.firstElementChild;
	this.current.classList.add('carousel-item-visible');
	setTimeout(this.flip, this.dataset.delay * 1 \|\| 2000);
	};

	document.registerElement('image-carousel', {prototype: carouselProto});