bmurphy1/carousel.js

## carousel.js
// Shorthand for $(document).ready();
$(function(){
  // Your code goes here...
  $('#next_frame').click(function(e){
    $(".frames").animate({marginLeft:-360}, 1000, function(){
      $(this).find("li:last").after($(this).find("li:first"));
      $(this).css({marginLeft:0})
      console.log("Animation complete");
    });
  });

  $('#previous_frame').click(function(e){
    $(".frames").animate({marginLeft:360}, 1000, function(){
      $(this).find("li:last").before($(this).find("li:first"));
      $(this).css({marginLeft:0})
      console.log("Animation complete");
    });
  });
});

## index.html
<!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>

## main.css
/*
 * 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;
}
.frames > li{
  /*position: absolute;*/
  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;
}
	// Shorthand for $(document).ready();
	$(function(){
	// Your code goes here...
	$('#next_frame').click(function(e){
	$(".frames").animate({marginLeft:-360}, 1000, function(){
	$(this).find("li:last").after($(this).find("li:first"));
	$(this).css({marginLeft:0})
	console.log("Animation complete");
	});
	});

	$('#previous_frame').click(function(e){
	$(".frames").animate({marginLeft:360}, 1000, function(){
	$(this).find("li:last").before($(this).find("li:first"));
	$(this).css({marginLeft:0})
	console.log("Animation complete");
	});
	});
	});
	<!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"><</a>
	<a href="#" id="next_frame">></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;
	}
	.frames > li{
	/position: absolute;/
	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;
	}