Skip to content

Instantly share code, notes, and snippets.

@stevenspiel
Forked from ksolo/carousel.js
Last active August 29, 2015 13:56
Show Gist options
  • Save stevenspiel/8850915 to your computer and use it in GitHub Desktop.
Save stevenspiel/8850915 to your computer and use it in GitHub Desktop.
Image Carousel
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Image Carousel</title>
</head>
<body>
<div class="container">
<div class="carousel_controls">
<a href="#" id="previous_frame">&lt;</a>
<a href="#" id="next_frame">&gt;</a>
</div>
<div class="carousel">
<ul class="frames">
<li>
<h2>Zip</h2>
<img src="http://f.cl.ly/items/3e332b2e0B3d311a1U1X/wargames.jpg" />
</li>
<li>
<h2>Zap</h2>
<img src="http://f.cl.ly/items/2h0Q3P0t0B3Q0N370u43/businessdude.jpg" />
</li>
<li>
<h2>Zop</h2>
<img src="http://f.cl.ly/items/3i2V2V0D3n293d0y2y0U/tron.jpg" />
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="carousel.js"></script>
</body>
</html>
/*
* Attribution: http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/
*
* DON'T VISIT THE ABOVE SITE FOR ANSWERS UNLESS YOU'RE
* COMPLETELY STUMPED
*
* ...also, it will not help you solve the JavaScript :)
*/
.container {
width: 360px;
height: 228px;
margin: 0 auto;
}
.carousel{
overflow:hidden;
width:100%;
}
.frames{
list-style:none;
position: relative;
width:300%;
overflow:hidden;
padding:0;
margin:0;
left:0;
}
.frames > li{
position: relative;
float:left;
width:33.33333%; /* 100 / number of frames */
}
.carousel img{
display:block;
width:100%;
max-width:100%;
}
.carousel h2{
font-size:1em;
padding:0.5em;
position:absolute;
bottom:10px;
left:10px;
text-align:left;
margin: 0;
color:#fff;
background-color:rgba(99,0,0,0.75);
}
.carousel_controls a {
font-family: monospace;
text-decoration: none;
position: absolute;
margin-top: 99px;
width: 30px;
line-height: 30px;
background-color: #eee;
border: 1px solid #ddd;
border-radius: 30px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
a#previous_frame {
margin-left: -50px;
}
a#next_frame {
margin-left: 380px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment