A CodePen by David Miller. Super Simple Responsive Slider (for your single-page buzzword site!) - Super lightweight slider for handling "page" transitions in a single-page site case. Been wanting to figure this out for a while, and hadn't just sat down and done it. But now I have! Uses css3 transitions to move between pages. Tasty webkit hardwar…

pageslider.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 id="slidecontainer">

<div class="page" id="page1">
<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="page" id="page2">
<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="page" id="page3">
<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(){
   $(".page").css("-webkit-transform", "translateX(0px)");
});

$(".link-middle").click(function(){
   $(".page").css("-webkit-transform", "translateX(-100%)");
});

$(".link-right").click(function(){
   $(".page").css("-webkit-transform", "translateX(-200%)");
});

style.css

body {
  font-family: helvetica, sans;
  background: url(http://dmillr.com/secretary/site/themes/mino/bg.png);
}

.navigation{
  width:100%;

}

.navigation ul {
  width:100%;
  text-align:center;
  list-style:none;
  padding-bottom: 1em;
  border-bottom: 3px dashed #333; 
  overflow: hidden;
}

.navigation ul li {
  display: inline-block;
}

.navigation ul li a {
  display: block;
  float: left;
  margin-right:2em;
  margin-top: 0.5em;
  width: 200px;
  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;
}


.page {
  width:80%;
  padding-right:10%;
  padding-left:10%;
  border: none;
  margin: none;
  padding: none;
  -webkit-transition: all 0.5s;
  -webkit-transform: translateX(0px);
 
}

#page1{
  position:absolute;
margin-left:0%;
top:150px;
}

#page2{
  position:absolute;
margin-left:100%;
top:150px;
}

#page3{
position:absolute;
margin-left:200%;
top:150px;
}

#page1 .content-block {   background: rgba(80,240,240,0.1); }
#page2 .content-block {   background: rgba(240,80,240,0.1); }
#page3 .content-block {   background: rgba(240,240,80,0.1); }




.content-block {
  padding: 2em;

  border: 2px solid #333;
  border-radius: 2em;
}