index.slim

body
  div.stack

    div#one.view
      p View One
      button.next Next

    div#two.view
      p View Two
      button.back Back
      |  
      button.next Next

    div#three.view
      p View Three
      button.back Back

/ button.init Bang!

script.js

var curr= null,
    outPos= "30px",
    inPos= "6px";

  console.log('init')

  $('.view').css({
    opacity: 0,
    zIndex: 0,
    left: outPos
  });
  
  curr= $('.view:first').css({
    opacity: 1,
    zIndex: 999,
    left: inPos
  });
 
setTimeout(function(){ 
  $('.view').addClass('transitionable');
},1);
  
  $('.back').on('click', function(e) {
    e.preventDefault();
    goBack();
  });
  
  $('.next').on('click', function(e) {
    e.preventDefault()
    goNext();
  });
                
function goNext() {
  var cV= curr, 
      nV= curr.next('.view');
  cV.css({
    zIndex: 0
  })
  nV.css({
    zIndex: 999,
    opacity: 1,
    left: inPos
  })
  curr= nV;
}

function goBack() {
  var cV= curr, 
      nV= curr.prev('.view');
  cV.css({
    opacity: 0,
    left: outPos
  })
    setTimeout(function(){
      cV.css({
        zIndex: 0
      })
      nV.css({
        zIndex: 999
      })
    }, 500);
  curr= nV;
}

/*function swapIt(oldView, newView, isNext){
  if(isNext) {
    
  oldView.css({ zIndex:0 }).removeClass('transitionable');
  newView.css({ opacity:1, zIndex:999, left:inPos });
  newView.one('webkitTransitionEnd', function(){
    oldView.css({ opacity:0, left:outPos });
    setTimeout(function(){
      oldView.addClass('transitionable')
    },1);
  }) ;

} else {

    
  oldView.css({ zIndex:0 }).removeClass('transitionable');
  newView.css({ opacity:0, zIndex:999, left:outPos });
  
  newView.one('webkitTransitionEnd', function(){
    oldView.css({ opacity:0, left:outPos });
    setTimeout(function(){
      oldView.addClass('transitionable')
    },1);
  }) ;

  
}
  return newView;
}
*/

style.css

body {
  background: #474747;
  padding: 20px 300px;
  box-sizing: border-box;  
  font-family: "Helvetica Neue";
  font-weight: 300;
}

.stack {
  position: relative;
  width: 300px;
  height: 250px;
  margin: 0 auto;
  box-shadow: 0px 4px 10px #000;
  border-radius: 3px;
  background: #E5E5E5;
  padding: 5px;
  border: 3px solid #fff;
  overflow: hidden;
}

.view {
  position: absolute;
  background: #fff;
  border: 1px solid silver;
  width: 295px;
  height: 245px;
  text-align: center;
  opacity: 0;
}

.transitionable {
  transition: all ease-out 0.4s;
}