<h1>Pure CSS Slide Panel</h1>
<div class="slide">
	<input id="go1" type="radio" name="select" class="input" checked>
	<input id="go2" type="radio" name="select" class="input">
	<input id="go3" type="radio" name="select" class="input">
	<input id="go4" type="radio" name="select" class="input">
	<figure class="photos">
		<figure class="photo" id="p1">
			<img alt="" src="http://img02.shop-pro.jp/PA01128/299/product/59712596.png" />
			<label for="go2" class="btn btn-inside next">›</label>
		</figure>
		<figure class="photo" id="p2">
			<img alt="" src="http://img02.shop-pro.jp/PA01128/299/product/59712596_o1.png" />
			<label for="go1" class="btn btn-inside prev">‹</label>
			<label for="go3" class="btn btn-inside next">›</label>
		</figure>
		<figure class="photo" id="p3">
			<img alt="" src="http://img02.shop-pro.jp/PA01128/299/product/59712596_o2.png" />
			<label for="go2" class="btn btn-inside prev">‹</label>
			<label for="go4" class="btn btn-inside next">›</label>
		</figure>
		<figure class="photo" id="p4">
			<img alt="" src="http://img02.shop-pro.jp/PA01128/299/product/59712596_o3.png" />
			<label for="go3" class="btn btn-inside prev">‹</label>
			<label for="go1" class="btn btn-inside next">«</label>
		</figure>
	</figure>
	<label for="go1" class="btn btn-outside go1">1</label>
	<label for="go2" class="btn btn-outside go2">2</label>
	<label for="go3" class="btn btn-outside go3">3</label>
	<label for="go4" class="btn btn-outside go4">4</label>
</div>
html,body,figure {
	margin: 0;
	padding: 0;
}
body,
.btn {
	background:#527E52;/* change color as you wish */
}
h1 {
	color:#999;
	color:rgba(0,0,0,0.5);
	font-size:2.5em;
	text-align: center;
}
img {
	display: block;
	width: 100%;
}
.slide {
	overflow:hidden;
	width: 440px;
	margin:1em auto;
	padding: 1em 0;
	position:relative;
	text-align: center;
	box-shadow: inset 0 0 5em 0 #000;
}
.photos {
	width: 1760px;
	height: 400px;
	position: relative;
}
.photo {
	float:left;
	width: 400px;
	position: relative;
	padding: 0 20px;
}
.input {
	position: absolute;
	clip:rect(0,0,0,0);
}
.btn {
	display: inline-block;
	padding:0.3em;
	cursor: pointer;
	text-align: center;
}
.btn:hover {
	color:#fff;
	text-shadow:0 0 0.1em #eee;
}
.btn-inside {
	position: absolute;
	box-shadow: 0 0 0.2em #000;
	border-radius: 50%;
	font-size:2em;
	font-family: arial;
	height: 1em;
	width: 1em;
	line-height: 0.9;
	top:180px;
}
.btn-outside {
	padding:0 1em;
	margin-top:1em;
}
.next {
	right:-0.6em;
}
.prev {
	left:-0.6em;
}
.btn-inside {
	display:none;
}
#go1:checked ~ .photos #p1 .btn-inside,
#go2:checked ~ .photos #p2 .btn-inside,
#go3:checked ~ .photos #p3 .btn-inside,
#go4:checked ~ .photos #p4 .btn-inside {
	display:inline-block;
}
#go1:checked ~ .go1,
#go2:checked ~ .go2,
#go3:checked ~ .go3,
#go4:checked ~ .go4 {
	box-shadow: inset 0 0 1em rgba(255,255,255,0.5);
}

/* animations */
.btn,
.photos {
	-webkit-transition:0.4s;
	-moz-transition:0.4s;
	transition:0.4s;
}
#go1:checked ~ .photos {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#go2:checked ~ .photos {
	-webkit-transform: translate3d(-440px,0,0);
	-moz-transform: translate3d(-440px,0,0);
	transform: translate3d(-440px,0,0);
}
#go3:checked ~ .photos {
	-webkit-transform: translate3d(-880px,0,0);
	-moz-transform: translate3d(-880px,0,0);
	transform: translate3d(-880px,0,0);
}
#go4:checked ~ .photos {
	-webkit-transform: translate3d(-1320px,0,0);
	-moz-transform: translate3d(-1320px,0,0);
	transform: translate3d(-1320px,0,0);
}
// photo by http://shop.st-neverland.com/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.