gistfile1.css

/**
 * Example of carrossel CSS only simplified
 */
/* this part is just look-and-feel */
.just-to-centralize-not-related-to-the-example {
  display: inline-block;
  margin-top: 20px;
  text-align: center;
  width: 100%;
}

.page {
  width: 200px;
  height: 150px;
}

.carousel {
  box-shadow: 0px 0px 13px rgba(50, 50, 50, 0.7);
  border: 10px solid #FFF;
  overflow: hidden;
}

.button {
  display: block;
  width: 23px;
  height: 23px;
  cursor: pointer;
}

.prev, .next {
  position: absolute;
  top: 55px;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(50, 50, 50, 0.7);
}
.prev {
  background: #ddd url(http://tympanus.net/Development/Elastislide/images/nav.png) no-repeat 4px 3px;
}
.next {
  right: 0;
  background: #ddd url(http://tympanus.net/Development/Elastislide/images/nav.png) no-repeat 4px -17px;
}

/* end of look-and-feel */

.carousel {
  display: inline-block;
  position: relative;
  width: 200px; /* the same width of the page */
}

.page {
  float: left;
}

.carousel input {
  display: none;
}

.move-right-container, .move-left-container {
  /* needs to fit all the pages inside */
  width: 1400px; /* = page.width * 7 */
}

.move-left-container {
  margin-left: -600px; /* initial state */
}

#second-page-left:checked ~ .move-left-container {
  /* moves one page to the right */
  transition: margin-left 300ms ease-in;
  margin-left: -400px; /* = page.width * -1 */
}

#third-page-left:checked ~ .move-left-container {
  /* moves two pages to the right */
  transition: margin-left 300ms ease-in;
  margin-left: -200px; /* = normal position 0 */
}

#first-page-left:checked ~ .move-left-container {
  animation: restart-left 300ms ease-in;
}

@keyframes restart-left {
    0% {
        margin-left: -200px; /* =-2*box.width */
    }
    100% {
        margin-left: 0; /* =-3*box.width */
    }
}

#second-page-right:checked ~ .move-left-container .move-right-container {
  /* moves one page to the right */
  transition: margin-left 300ms ease-in;
  margin-left: -200px; /* = page.width * -1 */
}

#third-page-right:checked ~ .move-left-container .move-right-container {
  /* moves two pages to the right */
  transition: margin-left 300ms ease-in;
  margin-left: -400px; /* = page.width * -2 */
}

#first-page-right:checked ~ .move-left-container .move-right-container {
  animation: restart-right 300ms ease-in;
}

@keyframes restart-right {
    0% {
        margin-left: -400px; /* =-2*box.width */
    }
    100% {
        margin-left: -600px; /* =-3*box.width */
    }
}

#first-page-left:checked ~ .for-first-page-left,
#first-page-left:checked ~ .for-third-page-left,

#second-page-left:checked ~ .for-first-page-left,
#second-page-left:checked ~ .for-second-page-left,

#third-page-left:checked ~ .for-third-page-left,
#third-page-left:checked ~ .for-second-page-left,

#first-page-right:checked ~ .for-first-page-right,
#first-page-right:checked ~ .for-third-page-right,

#second-page-right:checked ~ .for-first-page-right,
#second-page-right:checked ~ .for-second-page-right,

#third-page-right:checked ~ .for-third-page-right,
#third-page-right:checked ~ .for-second-page-right {
  display: none;
}

gistfile2.html

<div class="just-to-centralize-not-related-to-the-example">

  <div class="carousel">
    <input type="radio" name="controls-left" id="first-page-left" checked>
    <input type="radio" name="controls-left" id="second-page-left">
    <input type="radio" name="controls-left" id="third-page-left">
    
    <label class="for-second-page-left" for="second-page-left">
      <span class="button prev"></span>
    </label>
    
    <label class="for-third-page-left" for="third-page-left">
      <span class="button prev"></span>
    </label>

    <label class="for-first-page-left" for="first-page-left">
      <span class="button prev"></span>
    </label>

    <input type="radio" name="controls-right" id="first-page-right" checked>
    <input type="radio" name="controls-right" id="second-page-right">
    <input type="radio" name="controls-right" id="third-page-right">

    <label class="for-second-page-right" for="second-page-right">
      <span class="button next"></span>
    </label>
    
    <label class="for-third-page-right" for="third-page-right">
      <span class="button next"></span>
    </label>
    
    <label class="for-first-page-right" for="first-page-right">
      <span class="button next"></span>
    </label>
  
    <div class="move-left-container">
      <div class="move-right-container">
          <div class="page first">
            <a href="#A"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage7.s3.amazonaws.com/2e9edf6a0b1311e2bb3e22000a1de78b_7.jpg"></a>
	      </div>
          <div class="page second">
              <a href="#B"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage4.s3.amazonaws.com/4d3da87c493211e2a12822000a9f18f6_7.jpg"></a>
          </div>
	      <div class="page third">
	          <a href="#C"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage1.s3.amazonaws.com/aa10945e2c2911e292eb22000a1fbd89_7.jpg"></a>
	      </div> 
	      <div class="page first">
	           <a href="#A"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage7.s3.amazonaws.com/2e9edf6a0b1311e2bb3e22000a1de78b_7.jpg"></a>
	      </div>
	      <div class="page second">
	           <a href="#B"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage4.s3.amazonaws.com/4d3da87c493211e2a12822000a9f18f6_7.jpg"></a>
         </div>
	      <div class="page third">
	           <a href="#C"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage1.s3.amazonaws.com/aa10945e2c2911e292eb22000a1fbd89_7.jpg"></a>
	      </div>
	      <div class="page first">
               <a href="#A"><img src="http://thumbor.caricio.com/unsafe/200x150/distilleryimage7.s3.amazonaws.com/2e9edf6a0b1311e2bb3e22000a1de78b_7.jpg"></a>
	      </div>
      </div>      
   </div>
   
  </div>

</div>