awesome-slider.html

<template id="awesome-slider">
	<style>
		:host {
			display: block;
			width: 90%;
			position: relative;
			max-width: 620px;
		}

		.slider,
		.loader,
		.current,
		figure,
		loader,
		nav {
			display: block;
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
		}

		.loader,
		.current,
		figure,
		loader,
		nav {
			position: absolute;
		}

		.proportional {
			width: 100%;
			height: 0;
			padding-bottom: 60%;
		}

		.loader,
		.current {
			background-position: 50% 50%;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.loader.portrait,
		.current.portrait {
			background-size: auto 100%
		}

		.current {
			background-color: #2f2f2f;
			z-index: 5;
		}

		.first {
			background-color: #2a2a2a;
			background-position: 50% 50%;
			background-size: auto;
		}

		.current .ldr {
			position: absolute;
			width: 100%;
			height: 4px;
			background-color: #c43d3d;
			top: 0;
			left: 0;
			visibility: visible;
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
			-webkit-transition: -webkit-transform 5s ease-out;
			transition: transform 5s ease-out;
		}

		.next,
		.prev {
			display: block;
			position: absolute;
			height: 100%;
			width: 30%;
			border: none;
			top: 0;
			outline: none;
			z-index: 5;
			cursor: pointer;
			opacity: 0.3;
			-webkit-transition: opacity .15s ease-out;
			transition: opacity .15s ease-out;
		}

		.next:hover,
		.prev:hover {
			opacity: 1;
		}

		figure {
			margin: 0;
			background-color: #2f2f2f;
			overflow: hidden;
		}

		.next {
			right: 0;
			background: -moz-linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
			background: -webkit-linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
			background: -ms-linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
			background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
		}

		.prev {
			left: 0;
			background: -moz-linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
			background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
			background: -ms-linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
			background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, 0);
		}

		nav {
			z-index: 20;
			overflow: hidden;
		}

		.bullets {
			display: block;
			position: absolute;
			left: 0;
			width: 100%;
			z-index: 100;
			height: 20px;
			bottom: -35px;
			text-align: center;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		.bullets button {
			display: inline-block;
			position: relative;
			width: 24px;
			height: 24px;
			margin: 0;
			cursor: pointer;
			border: none;
			outline: none;
			background-color: transparent;
		}

		.bullets button:after,
		.bullets button:before {
			content: " ";
			display: block;
			position: absolute;
			top: 15%;
			left: 15%;
			width: 70%;
			height: 70%;
			border-radius: 50%;
			-webkit-transform: scale(0.5);
			transform: scale(0.5);
			-webkit-transition: -webkit-transform .225s cubic-bezier(.5, .75, .5, 1.65), opacity .15s ease-out;
			transition: transform .225s cubic-bezier(.5, .75, .5, 1.65), opacity .15s ease-out;
		}

		.bullets button:after {
			opacity: 0;
			background-color: #6a6a6a;
		}

		.bullets button:before {
			background-color: #3f3f3f;
		}

		.bullets button:hover:before {
			-webkit-transform: scale(0.7);
			transform: scale(0.7);
		}

		.bullets .active:after {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		.bullets .active:before {
			opacity: 0;
			-webkit-transform: scale(.5);
			transform: scale(.5);
		}

		.info {
			display: block;
			height: 30px;
			position: absolute;
			width: 100%;
			bottom: -30px;
			font-family: inherit;
			font-size: inherit;
			line-height: 30px;
			color: rgba(0, 0, 0, 0.4);
		}

		.info button {
			float: right;
			border: none;
			background-color: transparent;
			line-height: 30px;
			font-size: inherit;
			font-family: inherit;
			outline: none;
			cursor: pointer;
			color: rgba(0, 0, 0, 0.4);
		}

		.info button:hover {
			color: rgba(0, 0, 0, 0.8);
		}

		.a-left,
		.a-right {
			display: block;
			position: absolute;
			height: 20px;
			width: 20px;
			top: calc(50% - 10px);
			-webkit-transition: -webkit-transform .2s ease-out;
			-webkit-transition-delay: .2s;
			transition: transform .2s ease-out .2s;
			right: 30px;
		}

		.a-left:after,
		.a-left:before,
		.a-right:after,
		.a-right:before {
			content: " ";
			position: absolute;
			right: 0;
			height: 100%;
			width: 2px;
			background-color: #6a6a6a;
			opacity: .75;
			-webkit-transform-origin: 50% 100% 0;
			transform-origin: 50% 100% 0;
			-webkit-transition: -webkit-transform .15s ease-out;
			transition: transform .15s ease-out;
		}

		.a-right:before,
		.a-left:before {
			top: -50%;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

		.a-right:after,
		.a-left:after {
			top: calc(-50% + -1px);
			-webkit-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}

		.a-left {
			left: 30px;
		}

		.a-left:before,
		.a-left:after {
			right: auto;
			left: 0;
		}

		.a-left:before {
			top: -50%;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		.a-left:after {
			top: calc(-50% + -1px);
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
		}

		.next:hover .a-right:before {
			opacity: 1;
			-webkit-transform: rotate(-30deg);
			transform: rotate(-30deg);
		}

		.next:hover .a-right:after {
			opacity: 1;
			-webkit-transform: rotate(-150deg);
			transform: rotate(-150deg);
		}

		.prev:hover .a-left:before {
			opacity: 1;
			-webkit-transform: rotate(30deg);
			transform: rotate(30deg);
		}

		.prev:hover .a-left:after {
			opacity: 1;
			-webkit-transform: rotate(150deg);
			transform: rotate(150deg);
		}

		.next.active .a-right:before,
		.next.active .a-right:after {
			-webkit-transform: rotate(-90deg) scale(.75);
			transform: rotate(-90deg) scale(.75);
		}

		.prev.active .a-left:before,
		.prev.active .a-left:after {
			-webkit-transform: rotate(90deg) scale(.75);
			transform: rotate(90deg) scale(.75);
		}

		.next.active .a-right {
			-webkit-transform: translateX(55px);
			transform: translateX(55px);
		}

		.prev.active .a-left {
			-webkit-transform: translateX(-55px);
			transform: translateX(-55px);
		}

		@-moz-document url-prefix() {}

		.current.ready .ldr {
			visibility: hidden;
		}

		.current.loading .ldr {
			visibility: visible;
			-webkit-transform: translateX(-15%);
			transform: translateX(-15%);
		}

		.current.unload .ldr {
			-webkit-transition-duration: .4s;
			transition-duration: .3s;
			-webkit-transform: translateX(0%);
			transform: translateX(0%);
		}
		/* moveFromRightFade */

		.next-in {
			-webkit-animation: next-in .95s both cubic-bezier(.65, .0, .35, 1);
			animation: next-in .95s both cubic-bezier(.65, 0, .35, 1);
		}

		.next-out {
			-webkit-animation: next-out .85s both cubic-bezier(.65, 0, .35, 1);
			-webkit-animation-delay: .15s;
			animation: next-out .85s both cubic-bezier(.65, 0, .35, 1) .15s;
		}
		/* moveFromLeftFade */

		.prev-in {
			-webkit-animation: prev-in .95s both cubic-bezier(.65, 0, .35, 1);
			animation: prev-in .95s both cubic-bezier(.65, 0, .35, 1);
		}

		.prev-out {
			-webkit-animation: prev-out .85s both cubic-bezier(.65, 0, .35, 1);
			-webkit-animation-delay: .15s;
			animation: prev-out .85s both cubic-bezier(.65, 0, .35, 1) .15s;
		}

		@-webkit-keyframes loading {
			from {
				-webkit-transform: translateX(-100%);
			}
			to {
				-webkit-transform: translateX(-15%);
			}
		}

		@keyframes loading {
			from {
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
			}
			to {
				-webkit-transform: translateX(0%);
				transform: translateX(0%);
			}
		}

		@-webkit-keyframes next-in {
			from {
				-webkit-transform: translateX(100%);
			}
		}

		@keyframes next-in {
			from {
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
			}
		}

		@-webkit-keyframes next-out {
			to {
				-webkit-transform: translateX(-100%);
			}
		}

		@keyframes next-out {
			to {
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
			}
		}

		@-webkit-keyframes prev-in {
			from {
				-webkit-transform: translateX(-100%);
			}
		}

		@keyframes prev-in {
			from {
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
			}
		}

		@-webkit-keyframes prev-out {
			to {
				-webkit-transform: translateX(100%);
			}
		}

		@keyframes prev-out {
			to {
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
			}
		}
	</style>
	<content id="content" select="item"></content>
	<div class="slider">
		<figure>
			<div class="current"></div>
			<div class="loader"></div>
		</figure>
	</div>
</template>
<script>
	(function (window, document) {
		function whichEvent(name) {
			var t,
				el = document.createElement("fakeelement");
			var animations = {
				"animation": name + "end",
				"WebkitAnimation": "webkit" + (name.charAt(0).toUpperCase() + name.slice(1)) + "End"
			}
			for (t in animations) {
				if (el.style[t] !== undefined) {
					return animations[t];
				}
			}
		}
		var animationEvent = whichEvent("animation");
		var transitionEvent = whichEvent("transition");

		var Loader = (function () {
			var im = new Image(),
				loading = false,
				callback = null,
				ended = false;
			im.onload = function () {
				end(true);
			};
			im.onerror = function () {
				end(false);
			};

			function end(success) {
				if (ended) return;
				ended = true;
				if (callback) {
					callback(im);
				}
			}

			function run(url, back) {
				loading = true;
				ended = false;
				callback = back || null;
				im.src = url;
				if (im.width > 0) {
					end(true, callback);
				}
			}
			return {
				run: run
			}
		})();

		function updateItems(el) {
			var nodes = el.content.getDistributedNodes();
			var items = [];
			for (var i = 0, l = nodes.length; i < l; i++) {
				if (nodes[i].getAttribute("source")) {
					items.push({
						src: nodes[i].getAttribute("source"),
						html: nodes[i].innerHTML,
						loaded: false
					});
				}
			}
			el.items = items;
		}

		function clearSiblings(el, index) {
			var siblings = [].slice.call(el.bullets.children).filter(function (v) {
					return v !== el.bullets.children[index]
				}),
				i, l;
			for (i = 0, l = siblings.length; i < l; i++) {
				siblings[i].className = "";
			}
			el.bullets.children[index].className = "active";
		}

		function endLoading(el, index, dir) {
			var toggle;

			function _end() {
				el.loader.removeEventListener(animationEvent, _end);
				window.requestAnimationFrame(function () {
					el.loader.className = "current ready";
					el.current.className = "loader";
					if (el.nav) {
						el.nav.next.className = "next";
						el.nav.prev.className = "prev";
					}
					if (el.items[index].portrait) {
						el.loader.classList.add("portrait");
					}
					toggle = el.loader;
					el.loader = el.current;
					el.current = toggle;
					el.index = index;
					el.transitioning = false;
				});
			}
			el.loader.style.backgroundImage = "url(" + el.items[index].src + ")";
			el.loader.innerHTML = el.items[index].html;
			el.loader.addEventListener(animationEvent, _end);
			window.requestAnimationFrame(function () {
				el.loader.classList.add(dir + "-in");
				el.current.classList.add(dir + "-out");
			});
			if (el.bullets) {
				clearSiblings(el, index);
			}
			if (el.info) {
				el.info.text.innerHTML = (index + 1) + " / " + el.items.length;
			}
			if (el.items[index].portrait) {
				el.loader.classList.add("portrait");
			}
		}

		function goTo(el, index, dir) {
			function _end() {
				el.current.removeEventListener(transitionEvent, _end);
				endLoading(el, index, dir);
			}
			var ldr = document.createElement("div");
			ldr.className = "ldr";
			el.current.appendChild(ldr);

			dir = dir || "next";
			if (el.transitioning === true) return;
			if (index < 0) index = el.items.length - 1;
			if (index >= el.items.length) index = 0;
			el.transitioning = true;
			if (el.items[index].loaded !== true) {
				el.current.classList.remove("ready");
				el.current.offsetHeight;
				window.requestAnimationFrame(function () {
					el.current.classList.add("loading");
					Loader.run(el.items[index].src, function (img) {
						if (img.height > img.width) {
							el.items[index].portrait = true;
						}
						el.items[index].loaded = true;
						el.current.offsetHeight;
						el.current.addEventListener(transitionEvent, _end);
						window.requestAnimationFrame(function () {
							setTimeout(function () {
								el.current.classList.add("unload");
							}, 50);

						});
					});
				});
			} else {
				setTimeout(function () {
					window.requestAnimationFrame(function () {
						endLoading(el, index, dir);
					});
				}, 100);
			}
		}

		function firstLoad(el, index) {

		}

		function events(el) {
			el.position = {};
			el.addEventListener("keydown", function (event) {
				var key = event.which;
				if (key == 37 || key == 39) {
					event.preventDefault();
					if (key == 37) {
						el.prev();
						return;
					}
					el.next();
				}
			});
		}

		function applyBullets(el) {
			el.bullets = document.createElement("div");
			el.bullets.className = "bullets";
			var span = document.createElement("button"),
				child;
			for (var i = 0, l = el.items.length; i < l; i++) {
				child = span.cloneNode(true);
				child.setAttribute("data-index", i);
				child.addEventListener("click", function () {
					var index = this.getAttribute("data-index");
					goTo(el, index, index > el.index ? "next" : "prev");
				});
				el.bullets.appendChild(child);
			}
			el.container.appendChild(el.bullets);
		}

		function applyInfo(el) {
			el.info = document.createElement("div");
			el.info.className = "info";
			el.info.next = document.createElement("button"),
				el.info.prev = document.createElement("button"),
				el.info.text = document.createElement("span");
			el.info.next.innerHTML = "next";
			el.info.prev.innerHTML = "prev";
			el.info.text.innerHTML = "";
			el.info.appendChild(el.info.next);
			el.info.appendChild(el.info.prev);
			el.info.appendChild(el.info.text);
			el.info.next.addEventListener("click", function () {
				el.next();
			});
			el.info.prev.addEventListener("click", function () {
				el.prev();
			});
			el.container.appendChild(el.info);
		}

		function applyArrows(el) {
			el.nav = document.createElement("nav");
			el.nav.innerHTML = "<button class='next active'><em class='a-right'></em></button><button class='prev active'><em class='a-left'></em></button>";
			el.nav.next = el.nav.querySelector(".next");
			el.nav.prev = el.nav.querySelector(".prev");
			el.nav.next.addEventListener("click", function (event) {
				el.next();
			});
			el.nav.prev.addEventListener("click", function (event) {
				el.prev();
			});
			el.container.addEventListener("touchstart", function (event) {
				el.position.x = event.touches[0].clientX;
				el.position.y = event.touches[0].clientY;
			});
			el.container.addEventListener("touchmove", function (event) {
				if (!el.position.x || !el.position.y) {
					return;
				}
				var current = {},
					dif = {}
				current.x = event.touches[0].clientX;
				current.y = event.touches[0].clientY;
				dif.x = el.position.x - current.x;
				dif.y = el.position.y - current.y;
				if (Math.abs(dif.x) < 75 && Math.abs(dif.y) < 75) {
					return;
				}
				if (Math.abs(dif.x) > Math.abs(dif.y)) {
					if (dif.x > 0) {
						el.next();
					} else {
						el.prev();
					}
				}
				el.position.x = null;
				el.position.y = null;
			});
			el.container.appendChild(el.nav);
		}

		function checkStart(el) {
			var start = el.getAttribute("autostart");
			if (typeof start === "string") {
				goTo(el, 0, "next");
			}
		}

		function checkInfo(el) {
			var info = el.getAttribute("info");
			if (typeof info === "string") {
				applyInfo(el);
			}
		}

		function checkArrows(el) {
			var arrows = el.getAttribute("arrows");
			if (arrows != false && el.items.length > 1) {
				applyArrows(el);
			}
		}

		function checkBullets(el) {
			var bullets = el.getAttribute("bullets");
			if (typeof bullets === "string") {
				applyBullets(el);
			}
		}

		function checkHeight(el) {
			var height = el.getAttribute("height");
			if (typeof height === "string") {
				if (height.match(/^x([0-9]{1,3})%$/)) {
					el.container.classList.add("proportional");
					el.container.style.paddingBottom = height.replace("x", "");
				} else {
					el.container.style.height = height;
				}
			} else {
				el.container.classList.add("proportional");
			}
		}

		function checkPreImg(el) {
			var image = el.getAttribute("pre-image");
			if (typeof image === "string") {
				el.current.style.backgroundImage = "url(" + image + ")";
				el.current.classList.add("first");
			}
		}

		function getContent(nodes) {
			var text = []
			for (var i in nodes) {
				if (nodes[i].nodeType == 1) {
					text.push(nodes[i].outerHTML);
					continue;
				}
				if (nodes[i].nodeType == 3) {
					text.push(nodes[i].textContent);
					continue;
				}
			}
			return text.join(" ");
		}

		function init(el) {
			var clone = mainDoc.importNode(template, true);
			el.shadow = el.createShadowRoot();
			el.shadow.appendChild(clone);
			el.figure = el.shadow.querySelector("figure");
			el.current = el.shadow.querySelector(".current");
			el.loader = el.shadow.querySelector(".loader");
			el.content = el.shadow.querySelector("content");
			el.container = el.shadow.querySelector(".slider");
			el.class = "slider";
		}
		var mainDoc = document,
			thisDoc = (mainDoc._currentScript || mainDoc.currentScript).ownerDocument,
			template = thisDoc.querySelector('template#awesome-slider').content,
			element = Object.create(HTMLElement.prototype);

		if (window.ShadowDOMPolyfill) {
			WebComponents.ShadowCSS.shimStyling(template, "awesome-slider");
		}

		element.createdCallback = function () {
			init(this);
			updateItems(this);
			checkArrows(this);
			checkBullets(this);
			checkInfo(this);
			checkHeight(this);
			checkPreImg(this);
			events(this);
			checkStart(this);
		};

		element.firstRun = function () {
			goTo(this, 0, "next");
		}

		element.next = function () {
			var el = this.nav.next,
				self = this;

			function _end() {
				el.removeEventListener(transitionEvent, _end);
				goTo(self, parseInt(self.index) + 1, "next");
			}
			el.addEventListener(transitionEvent, _end);
			el.className = "next active";
		};

		element.prev = function () {
			var el = this.nav.prev,
				self = this;

			function _end() {
				el.removeEventListener(transitionEvent, _end);
				goTo(self, parseInt(self.index) - 1, "prev");
			}
			el.addEventListener(transitionEvent, _end);
			el.className = "prev active";
		};

		mainDoc.registerElement('awesome-slider', {
			prototype: element
		});
	})(window, document);
</script>