Responsive CSS only slideshow with navigation

by cchana

HTML

Width: <input type="range" min="320" max="1024" value="320" class="slider" />

<div class="container">
	<div class="slideshow">
		<div id="slide-1" class="slide">
			<a href="#slide-7"></a>
			<a href="#slide-2"></a>
			<img src="https://c1.staticflickr.com/9/8724/16310801553_cea90ae63d_n.jpg" />
		</div>
		<div id="slide-2" class="slide">
			<a href="#slide-1"></a>
			<a href="#slide-3"></a>
			<img src="https://c2.staticflickr.com/4/3719/19819674272_2384feaaf8_n.jpg" />
		</div>
		<div id="slide-3" class="slide">
			<a href="#slide-2"></a>
			<a href="#slide-4"></a>
			<img src="https://c2.staticflickr.com/2/1627/24319275501_3ec6f36fa7_n.jpg" />
		</div>
		<div id="slide-4" class="slide">
			<a href="#slide-3"></a>
			<a href="#slide-5"></a>
			<img src="https://c2.staticflickr.com/2/1460/25194537936_e3c54faefc_n.jpg" />
		</div>
		<div id="slide-5" class="slide">
			<a href="#slide-4"></a>
			<a href="#slide-6"></a>
			<img src="https://c2.staticflickr.com/2/1460/26216238325_9c425923a7_n.jpg" />
		</div>
		<div id="slide-6" class="slide">
			<a href="#slide-5"></a>
			<a href="#slide-7"></a>
			<img src="https://c2.staticflickr.com/8/7578/26194232483_8204bf119b_n.jpg" />
		</div>
		<div id="slide-7" class="slide">
			<a href="#slide-6"></a>
			<a href="#slide-1"></a>
			<img src="https://c2.staticflickr.com/8/7106/26862741906_d5283c42ba_n.jpg" />
		</div>
	</div>
</div>

SCSS

.container {
	width: 320px;
}
.slideshow {
	position: relative;
	width: 100%;
	&:after {
		content: '';
		display: block;
		padding-bottom: calc((100% / 6) * 4);
	}
	&:hover a {
		opacity: 1;
	}
	a {
		opacity: 0;
		position: relative;
		text-decoration: none;
		transition: opacity 0.5s;
		&:after {
			border-color: #FFF #FFF transparent transparent;
			border-style: solid;
			border-width: 2px;
			color: #FFF;
			display: block;
			height: 10px;
			position: absolute;
			top: calc(50% - 5px);
			width: 10px;
		}
		&:first-child:after {
			content: '';
			left: 10px;
			transform: rotate(-135deg);
		}
		&:nth-child(2):after {
			content: '';
			right: 10px;
			transform: rotate(45deg);
		}
	}
	.slide {
		background-color: #FFF;
		box-sizing: border-box;
		display: none;
		height: 100%;
		position: absolute;
		width: 100%;
		&:first-child,
		&:target {
			display: block;
		}
		a {
			display: block;
			height: 100%;
			position: absolute;
			width: 50%;
			&:nth-child(2) {
				left: 50%;
			}
		}
		img {
			width: 100%;
		}
	}
}

a:target {
	color: red;
}

JavaScript

var slider = document.getElementsByClassName('slider')[0];
slider.oninput = function(el) {;
	var container = document.getElementsByClassName('container')[0];
	container.style.width = el.target.value + 'px';
}