Created
September 26, 2012 22:24
-
-
Save anonymous/3791012 to your computer and use it in GitHub Desktop.
A carousel that shows one panel on smaller screens, and eventually reveals three panels when space becomes available. It's also touch-enabled.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--Pattern HTML--> | |
<div id="pattern" class="pattern"> | |
<div class="c"> | |
<div class="c-list-container"> | |
<ul class="c-list"> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the first title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the second title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the third title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the fourth title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the fifth title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the sixth title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the seventh title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the eighth title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" alt="FPO Image" /> | |
<div class="summary"> | |
<h2>This is the ninth title</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget lacus erat, sit amet tempor nibh. Aliquam erat volutpat. Nulla et porta tortor. </p> | |
</div> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<nav class="c-nav"> | |
<a href="#" class="prev">← Prev</a> | |
<a href="#" class="next">Next →</a> | |
</nav> | |
</div> | |
</div> | |
<!--End Pattern HTML--> | |
<div class="container"> | |
<section class="pattern-description"> | |
<h1>3-Up Touch Carousel</h1> | |
<p>A carousel that shows one panel on smaller screens, 2 panels for medium screens, and reveals three panels at a time when space becomes available. The user can click the previous and next buttons to advance, but touch-enabled users can also swipe through the carousel.</p> | |
</section> | |
<footer role="contentinfo"> | |
<div> | |
<nav id="menu"> | |
<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">←More Responsive Patterns</a> | |
</nav> | |
</div> | |
</footer> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(w){ | |
var sw = document.body.clientWidth, | |
current = 0, | |
breakpointSize = window.getComputedStyle(document.body,':after').getPropertyValue('content'), | |
multiplier = 1, /*Determines the number of panels*/ | |
$carousel = $('.c'), | |
$cList = $('.c-list'), | |
$cContainer = $('.c-list-container'), | |
$cWidth = $cContainer.outerWidth(), | |
cLeft = $cList.css("left").replace("px",""), | |
$li = $('.c li'), | |
$liLength = $li.size(), | |
numPages = $liLength/multiplier, | |
$prev = $('.c-nav .prev'), | |
$next = $('.c-nav .next'); | |
$(document).ready(function() { | |
buildCarousel(); | |
}); | |
$(window).resize(function(){ //On Window Resize | |
sw = document.body.clientWidth; | |
$cWidth = $cContainer.width(); | |
breakpointSize = window.getComputedStyle(document.body,':after').getPropertyValue('content'); /* Conditional CSS http://adactio.com/journal/5429/ */ | |
sizeCarousel(); | |
posCarousel(); | |
}); | |
function sizeCarousel() { //Determine the size and number of panels to reveal | |
current = 0; | |
if (breakpointSize == 'medium') { | |
multiplier = 2; | |
} else if (breakpointSize == 'large') { | |
multiplier = 3; | |
} else { | |
multiplier = 1; | |
} | |
animLimit = $liLength/multiplier-1; | |
$li.outerWidth($cWidth/multiplier); //Set panel widths | |
} | |
function buildCarousel() { //Build the Carousel | |
sizeCarousel(); | |
if(Modernizr.touch) { | |
buildSwipe(); | |
} | |
} | |
function posCarousel() { //Animate Carousel. CSS transitions used for the actual animation. | |
var pos = -current * $cWidth; | |
$cList.addClass('animating').css("left",pos); | |
setTimeout(function() { | |
$cList.removeClass('animating'); | |
cLeft = $cList.css("left").replace("px",""); | |
}, 500); // will work with every browser | |
} | |
$prev.click(function(e){ //Previous Button Click | |
e.preventDefault(); | |
moveRight(); | |
}); | |
$next.click(function(e){ //Next Button Click | |
e.preventDefault(); | |
moveLeft(); | |
}); | |
function moveRight() { | |
if(current>0) { | |
current--; | |
} | |
posCarousel(); | |
} | |
function moveLeft() { | |
if(current<animLimit) { | |
current++; | |
} | |
posCarousel(); | |
} | |
function buildSwipe() { | |
var threshold = 80, | |
origX = 0, | |
finalX = 0, | |
changeX = 0, | |
changeY = 0, | |
curPos; | |
//Touch Start | |
$cContainer.get(0).addEventListener("touchstart", function (event) { | |
origX = event.targetTouches[0].pageX; | |
curPos = origX; | |
}); | |
//Touch Move | |
$cContainer.get(0).addEventListener("touchmove", function (event) { | |
finalX = event.touches[0].pageX, | |
diffX = origX - finalX, | |
leftPos = cLeft-diffX; | |
event.preventDefault(); | |
$cList.css("left",leftPos); | |
}); | |
//Touch Move | |
$cContainer.get(0).addEventListener("touchend", function (event) { | |
var diffX = origX - finalX, | |
diffXAbs = Math.abs(diffX); | |
if (diffX > 0 && diffXAbs > threshold) { | |
moveLeft(); | |
} else if (diffX < 0 && diffXAbs > threshold) { | |
moveRight(); | |
} else { | |
posCarousel(); | |
} | |
origX = finalX = diffX = 0; | |
}); | |
} | |
})(this); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.c { | |
position: relative; | |
max-width: 74em; | |
margin: 0 auto; | |
} | |
.c-list-container { | |
overflow: hidden; | |
position: relative; | |
} | |
.c-list { | |
width: 99999em; | |
position: relative; | |
left: 0; | |
} | |
.c-list.animating { | |
-webkit-transition: left 0.25s ease-out; | |
-moz-transition: left 0.25s ease-out; | |
-o-transition: left 0.25s ease-out; | |
transition: left 0.25s ease-out; | |
} | |
.c li { | |
float: left; | |
} | |
.c li a { | |
display: block; | |
} | |
.c img { | |
display: block; | |
} | |
.c h2 { | |
margin-top: 0; | |
} | |
.summary { | |
padding: 1em; | |
} | |
.c-nav { | |
clear: both; | |
overflow: hidden; | |
border-top: 1px solid #808080; | |
} | |
.c-nav a { | |
float: left; | |
width: 50%; | |
padding: 1em; | |
-webkit-transition: opacity 0.5s ease-out; | |
-moz-transition: opacity 0.5s ease-out; | |
-o-transition: opacity 0.5s ease-out; | |
transition: opacity 0.5s ease-out; | |
} | |
.c-nav a.next { | |
border-left: 1px solid #808080; | |
text-align: right; | |
} | |
.c-nav a.inactive { | |
opacity: 0.2; | |
} | |
/* Medium */ | |
@media screen and (min-width: 35em) { | |
.c { | |
padding: 1em 0.5em 0; | |
} | |
.c li { | |
padding: 0 0.5em; | |
} | |
body:after { /* Conditional CSS http://adactio.com/journal/5429/ */ | |
content: 'medium'; | |
display: none; | |
} | |
} | |
/* Large */ | |
@media screen and (min-width: 56.25em) { | |
body:after { /* Conditional CSS http://adactio.com/journal/5429/ */ | |
content: 'large'; | |
display: none; | |
} | |
} | |
/*Large with room to spare on either side */ | |
@media screen and (min-width: 82em) { | |
.c-nav a { | |
position: absolute; | |
top: 40%; | |
left: -4em; | |
width: 4em; | |
height: 2em; | |
padding: 0; | |
margin-top: -1em; | |
} | |
.c-nav a.next { | |
left: auto; | |
right: -4em; | |
border: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment