/share/ClickSlider.html

<html>
	<head>
		<style>
.carousel > * {
	display: none;
	-webkit-transition-property: -webkit-transform;
	        transition-property:         transform;
	-webkit-transition-duration: 300ms;
	        transition-duration: 300ms;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
	        transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
	will-change: transform, -webkit-transform;
}

.carousel > .next,
.carousel > .current,
.carousel > .previous {
	display: inline-block;
}

.carousel > .next,
.carousel > .previous {
	cursor: pointer;
}

.carousel > .previous {
	-webkit-transform: translateX(0vw);
	        transform: translateX(0vw);
}

.carousel > .current {
	-webkit-transform: translateX(20vw);
	        transform: translateX(20vw);
}

.carousel > .next {
	-webkit-transform: translateX(80vw);
	        transform: translateX(80vw);
}
		</style>
	</head>
	<body>
		<div class="carousel">
			<div>
				<h2>A</h2>
				<p>a</p>
			</div>
			<div>
				<h2>B</h2>
				<p>b</p>
			</div>
			<div>
				<h2>C</h2>
				<p>c</p>
			</div>
			<div>
				<h2>D</h2>
				<p>d</p>
			</div>
			<div>
				<h2>E</h2>
				<p>e</p>
			</div>
			<div>
				<h2>F</h2>
				<p>f</p>
			</div>
			<div>
				<h2>G</h2>
				<p>g</p>
			</div>
		</div>
		<aside>
			<h1>Usage:</h1>
			<p>Copy the following to the page:</p>
			<h2>CSS</h2>
			<pre>
.carousel > * {
	display: none;
	-webkit-transition-property: -webkit-transform;
	        transition-property:         transform;
	-webkit-transition-duration: 300ms;
	        transition-duration: 300ms;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
	        transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
	will-change: transform, -webkit-transform;
}

.carousel > .next,
.carousel > .current,
.carousel > .previous {
	display: inline-block;
}

.carousel > .next,
.carousel > .previous {
	cursor: pointer;
}

.carousel > .previous {
	-webkit-transform: translateX(0vw);
	        transform: translateX(0vw);
}

.carousel > .current {
	-webkit-transform: translateX(20vw);
	        transform: translateX(20vw);
}

.carousel > .next {
	-webkit-transform: translateX(80vw);
	        transform: translateX(80vw);
}</pre>
			<h2>JS</h2>
			<pre>
Array.prototype.forEach.call(document.querySelectorAll(".carousel"), function(element) {
	var current = element.children[0];

	function applyCurrent(element) {
		if (current.previousElementSibling)
			current.previousElementSibling.classList.remove("previous");

		current.classList.remove("current");

		if (current.nextElementSibling)
			current.nextElementSibling.classList.remove("next");

		if (element.previousElementSibling)
			element.previousElementSibling.classList.add("previous");

		element.classList.add("current");
		current = element;

		if (element.nextElementSibling)
			element.nextElementSibling.classList.add("next");
	}

	Array.prototype.forEach.call(element.children, function(child) {
		child.addEventListener("click", function(event) {
			applyCurrent(child);
		});
	});

	applyCurrent(current);
});</pre>
			<p>Add the class "carousel" to any element whose <strong>immediate</strong> children will be used for the carousel.</p>
			<o>Make sure to put the JS code <strong>after</strong> such elements (a good place for it is right before the ending <code>&lt;body&gt;</code>).</o>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
		</aside>
		<script>
"use strict";

Array.prototype.forEach.call(document.querySelectorAll(".carousel"), function(element) {
	var current = element.children[0];

	function applyCurrent(element) {
		if (current.previousElementSibling)
			current.previousElementSibling.classList.remove("previous");

		current.classList.remove("current");

		if (current.nextElementSibling)
			current.nextElementSibling.classList.remove("next");

		if (element.previousElementSibling)
			element.previousElementSibling.classList.add("previous");

		element.classList.add("current");
		current = element;

		if (element.nextElementSibling)
			element.nextElementSibling.classList.add("next");
	}

	Array.prototype.forEach.call(element.children, function(child) {
		child.addEventListener("click", function(event) {
			applyCurrent(child);
		});
	});

	applyCurrent(current);
});
		</script>
	</body>
</html>