<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/