A CodePen by David Miller. Single page app CSS page slider with bonus minimalism - Forked. cleaner.

minimalPageSlider.html

<div class="navigation">
  <ul>
    <li>
      <a href="#left" class="link-left">Look at that left page</a>
    </li>
    <li>
      <a href="#middle" class="link-middle">Look at that middle page</a>
    </li>
    <li>
      <a href="#right" class="link-right">Look at that right page</a>
    </li>
  </ul>
</div><!-- /navs -->

<!--content-->
<div class="row">
<div class="slidecontainer">

<div class="slideable">
<div class="content-block">
  <h1>Leftmost Content</h1>
  <p>This is the content that lives on the leftmost slideypage</p>
</div><!--content-block-->
</div><!--left-->

<div class="slideable">
<div class="content-block">
  <h1>Center Content</h1>
  <p>This is the content that lives on the middle slideypage</p>
</div><!--content-block-->
</div><!--middle-->
  
<div class="slideable">
<div class="content-block">
  <h1>Rightmost Content</h1>
  <p>This is the content that lives on the right slideypage</p>
</div><!--content-block-->
</div><!--right-->
  
</div><!--slidecontainer-->
</div><!--row-->
  

script.js

$(".link-left").click(function(){
   $(".slidecontainer").css("margin-left", "0%");
});

$(".link-middle").click(function(){
   $(".slidecontainer").css("margin-left", "-100%");
});

$(".link-right").click(function(){
   $(".slidecontainer").css("margin-left", "-200%");
});

style.css

body {
  font-family: helvetica, sans;
  background: #FFF;
}

.navigation{
  width:100%;
}

.navigation ul {
  overflow: hidden;
}

.navigation ul li {
  display: inline;
}

.navigation ul li a {
  display: block;
  float: left;
  margin-top: 2em;
  margin-left:2em;
  width: 100px;
  text-decoration:none;
  text-align:center;
  color:#FFF;
  background-color:#333;
  padding: 0.6em;
  border: 2px solid #111;
  border-radius: 0.6em;
}

.row {
  top:0px;
  left:0px;
  width:100%;
  overflow: hidden;
}

.slidecontainer {
  width:300%;
  margin-left: -110%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  /* transitions */
  transition: margin-left 0.5s;
  -webkit-transition: margin-left 0.5s; 
  -moz-transition: margin-left 0.5s;
  -o-transition: margin-left 0.5s;
}

.slideable {
  width:32%;
  padding-right:0.66666%;
  padding-left:0.66666%;
  border: none;
  margin: none;
  padding: none;
  float: left;
}

.content-block {
  margin-left: 2em;
  margin-right:2em;
}

h1 {
  padding-bottom: 0.3em;
  border-bottom: 5px dashed #111;
}