Cacher is the code snippet organizer for pro developers

/* Scrollbar Webkit */
::-webkit-scrollbar{
  width:0.5em;
  background:#fdfdfd;
}
::-webkit-scrollbar-thumb{
  background:#ddd;
}
::selection{
  background:#289ADA;
  color:#ffffff;
}
body{
  margin:0;
  padding:0;
  position:relative;
  background:#fdfdfd;
  font-family:'Lato', cursive;
  font-weight:small;
  overflow-x:hidden;
}
h1{
  font-family:'Emblema One', cursive;
  margin-left:5%;
}
section{
  position:absolute;
  margin:0;
  padding:3%;
  top:0;
  transition:left 0.8s ease-in-out;
  Color:#777;
}

figure img{
  display:block;
  width:100%;
}
figcaption{
  font-size:small;
}
pre{
  display:block;
  width:95%;
  padding:2%;
  background:#333;
  color:aqua;
}

a[class^="nt-"],
a[class^="pv-"]{
  position:absolute;
  top:0;
  padding:6px;
  text-decoration:none;
  color:#777;
}
a[class^="nt-"]{
  right:20px;
 /* your code for all next buttons*/ 
}
a[class^="pv-"]{
  left:0;
 /* your code for all  prev buttons */ 
}

(function(){
  
  'use-strict';
  
  var _All = function(el){
    return document.querySelectorAll(el);
  },
      _ = function(el){
        return document.querySelector(el);
      },
      section = _All('[data-page]'),
      
      wd = _('section').offsetWidth,
      
      all = _('.slide').offsetWidth,   
      
      clicks = function(el) {
        _('.nt-'+el).addEventListener('click',function(){
          if(el < section.length-1){
            this.parentNode.nextElementSibling.style.left = '0%';
            this.parentNode.style.left = (-1)+'00%';
          }
        },false);
        _('.pv-'+el).addEventListener('click',function(){
          if(el > 0){
            this.parentNode.previousElementSibling.style.left = '0%';
            this.parentNode.style.left = (+1)+'00%';
          }
        },false);  
      };
  
  for (var i = 0; i < section.length; i++) {
    section[i].style.width = '95%';
    if(i === 0){
      section[0].style.left = 0;
      section[0].innerHTML +=
        '<a href="#" class="pv-0 nt-'+i+'">Next</a>'; 
    }else{
      section[i].style.left = '100%';
      section[i].innerHTML += 
        '<a href="#" class="pv-'+i+'">Prev</a> '+
        '<a href="#" class="nt-'+i+'">Next</a> '; 
    } 
    clicks(i);
  }
}).call(this);

<!-- google fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato|Emblema+One' rel='stylesheet' type='text/css'>



<div class="slide">
  <section data-page="one">
    <h1>Simply Full Slide.</h1>
    <figure>
      <img src="http://24.media.tumblr.com/1b1464fc1ef5ddfe8fd2e9c9c50e96f8/tumblr_myp9aotkm91st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="two">
    <h1>Responsive.</h1>
    <figure>
      <img src="http://24.media.tumblr.com/56fea5f4c81a60e418a83e114ac07414/tumblr_myp99avE2U1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="three">
    <h1>Little Javascript.</h1>
    <pre>
    var _All = function(el){
      return document.querySelectorAll(el);
    },
    _ = function(el){
      return document.querySelector(el);
    },
    section = _All('[data-page]'),
    // Get section width
    wd = _('section').offsetWidth,
    // Get slide width
    all = _('.slide').offsetWidth,   
    // Click function
    clicks = function(el) {
      _('.nt-'+el).addEventListener('click',function(){
        if(el &lt; section.length-1){
          this.parentNode.nextElementSibling.style.left = '0%';
          this.parentNode.style.left = (-1)+'00%';
        }
      },false);
      _('.pv-'+el).addEventListener('click',function(){
        if(el &gt; 0){
          this.parentNode.previousElementSibling.style.left = '0%';
          this.parentNode.style.left = (+1)+'00%';
        }
      },false);  
    };
    // Get all elements 
    for (var i = 0; i &lt; section.length; i++) {
      // Padding discount in width
      section[i].style.width = '95%';
      if(i === 0){
        section[0].style.left = 0;
        section[0].innerHTML +=
          '&lt;a href="#" class="pv-0 nt-'+i+'"&gt;Next&lt;/a&gt;'; 
      }else{
        section[i].style.left = '100%';
        section[i].innerHTML += 
          '&lt;a href="#" class="pv-'+i+'"&gt;Prev&lt;/a&gt; '+
          '&lt;a href="#" class="nt-'+i+'"&gt;Next&lt;/a&gt; '; 
      } 
      clicks(i);
      }</pre>
  </section>
  
  <section data-page="four">
    <figure>
      <img src="http://24.media.tumblr.com/899355a7363be380170ecfcbdc9744d7/tumblr_myp93odkni1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="five">
    <figure>
      <img src="http://31.media.tumblr.com/2bd5173cc838a013cc38d01bdb39ec84/tumblr_myp92oDsGX1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="six">
    <figure>
      <img src="http://25.media.tumblr.com/a408ad9af259cf827ed4599d60bcb0a9/tumblr_myebwtELvb1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="seven">
    <figure>
      <img src="http://24.media.tumblr.com/c191202cf54249bf7149acf7054252d0/tumblr_myebvrTkci1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="eight">
    <figure>
      <img src="http://31.media.tumblr.com/4f8af2bc0c5c352fe8513ea5e645a7bd/tumblr_myebv0eI7k1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="nine">
    <figure>
      <img src="http://31.media.tumblr.com/10a854e384e931f719311055c1f9627f/tumblr_myebu5dKht1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
  
  <section data-page="ten">
    <figure>
      <img src="http://25.media.tumblr.com/26644ccd89d8aff72d4600d89254ffec/tumblr_myebteWgAP1st5lhmo1_1280.jpg" alt="Unsplash" /> 
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quo nihil ullam. 
      </figcaption>
    </figure>
  </section>
</div>