<h1>A pure CSS carousel</h1>
<h2>Scroll Paging<h2>
<div class="carousel" id="test1">
	<input type="radio" name="item" value="1" checked>
	<div>
    <img src="http://lorempixel.com/600/350/food/1/">
	</div>

	<input type="radio" name="item" value="2">
	<div>
     <img src="http://lorempixel.com/600/350/food/2/">
	</div>

	<input type="radio" name="item" value="3">
	<div>
     <img src="http://lorempixel.com/600/350/food/3/" >
	</div>

	<input type="radio" name="item" value="4">
	<div>
		<img src="http://lorempixel.com/600/350/food/4/">
	</div>
</div>

<h2>Disolve Paging<h2>
<div class="carousel" id="test2">
	<input type="radio" name="item2" value="1" checked>
	<div>
    <img src="http://lorempixel.com/600/350/food/1/">
	</div>

	<input type="radio" name="item2" value="2">
	<div>
     <img src="http://lorempixel.com/600/350/food/2/">
	</div>

	<input type="radio" name="item2" value="3">
	<div>
     <img src="http://lorempixel.com/600/350/food/3/" >
	</div>

	<input type="radio" name="item2" value="4">
	<div>
		<img src="http://lorempixel.com/600/350/food/4/">
	</div>
</div>

<h2>Instant Paging<h2>
<div class="carousel" id="test3">
	<input type="radio" name="item3" value="1" checked>
	<div>
    <img src="http://lorempixel.com/600/350/food/1/">
	</div>

	<input type="radio" name="item3" value="2">
	<div>
     <img src="http://lorempixel.com/600/350/food/2/">
	</div>

	<input type="radio" name="item3" value="3">
	<div>
     <img src="http://lorempixel.com/600/350/food/3/" >
	</div>

	<input type="radio" name="item3" value="4">
	<div>
		<img src="http://lorempixel.com/600/350/food/4/">
	</div>
</div>

/* Control styles
-------------------------------------------- */

.carousel {
  position: relative;
}
.carousel	input {
  position: absolute;
  left: 0;
  z-index: 3;
  margin: 0;
}
.carousel input:before {
  position: absolute;
  content: "<";
}
input:checked ~ input:before {
  content: ">";
}
input:checked {
  display: none;
}
input:checked ~ input {
  right: 0;
  left: auto;		
}
input:checked + div + input {
  z-index: 4;
}
input + div {
  position: absolute;
  z-index: 1;
}  
input:checked + div {
  z-index: 2;
}  


/* Demo styles
--------------------------------------------  */

body {
  font: 90% / 1.5 Arial;
  text-align: center;
}
.carousel {
  width: 600px;
  height: 350px;
  margin: 2em auto;
  overflow:hidden;
  transform: translateZ(0px); /* stops flickering incode pen*/
  box-shadow: 0 0 2px 1px #ccc;
}
.carousel	input {
  top: 150px;
  width: 60px;
  height: 60px;
  left: 10px;
}
input:checked ~ input {
  right: 10px;	
}
.carousel input:before {
  background: #888;
  border-radius: 50%;
  color: #fff;
  font-size: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 5px solid #fff;
}


/* Scroll
--------------------------------------------  */

#test1 input + div {
  transform: translate3d(-100%,0,0);
  transition: transform .5s ease-in-out;
}
#test1 input:checked + div {
  transform: translate3d(0,0,0);
}
#test1 input:checked + div ~ div {
  transform: translate3d(100%,0,0);
}


/* Disolve
--------------------------------------------  */

#test2 input + div {
  transition: opacity 0s 1s;
  opacity: 0;
}
#test2 input:checked + div {
  transition: opacity 1s;
  opacity: 1;
}