A responsive image slide show

dabblet.css

/**
 * A responsive image slide show
 * This is just the basic structure (test)
 */

* { box-sizing: border-box; }

/* Picture gallery - all pictures visible for this demo */
.slides {
	position: absolute;
	top: 2em;
	left: 5%;
	width: 90%;
	height: auto;
	text-align: center;
	visibility: visible;	/* for now */
}

.row {
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
}

.col {
	position: relative;
	float: left;
	width: 33.33%;
	height: 100%;
	border: thin dotted red;
	padding-top: 33.33%;
	background: url(https://dl.dropboxusercontent.com/u/36859227/images/loading-light.gif) no-repeat center;
}

.col:last-of-type {
	float: none;
	overflow: hidden;
	width: auto;
}

.col > img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 100%;
	max-height: 100%;
}

/* Center images - only working in Opera as of June 2013 */
@supports (transform: translate(-50%, -50%)) {
	.col > img {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

dabblet.html

<section class="slides">
	<div class="row">
		<div class="col">
			<img src="https://dl.dropboxusercontent.com/u/36859227/images/blue.jpg" alt="blue morning glory">
		</div>
		<div class="col">
			<img src="https://dl.dropboxusercontent.com/u/36859227/images/daytimemoon.jpg" alt="daytime moon">
		</div>
		<div class="col">
			<img src="https://dl.dropboxusercontent.com/u/36859227/images/full_moon_night.jpg" alt="full moon — night">
		</div>
	</div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}