Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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…
<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-->
$(".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%)");
});
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.