MarkDucommun · December 21, 2015 03:29
diff --git a/carousel.js b/carousel.js
 // Shorthand for $(document).ready();
 $(function(){
  // Your code goes here...
  $('#previous_frame').click(function(event){
    event.preventDefault();
    $('.frames').animate({"right": "100%"}, 1000, function(){
      $(this).animate({"right": "70%"}, 300, function(){
        $(this).animate({"right": "110%"}, 200, function(){ 
          $(this).append($('.frames li:first-child').remove()).css("right", 0)
        })
      })
    });
  });
  
  $('#next_frame').click(function(event){
    event.preventDefault();
    $('.frames').prepend($('.frames li:last-child').remove()).css("right", "100%").animate({"right" : 0}, 200)
  })
 });
diff --git a/index.html b/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>
diff --git a/main.css b/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%;
  border-radius: 5em;
 }

 .frames{
  list-style:none;
  position: relative;
  width:300%;
  overflow:hidden;
  padding:0;
  margin: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;
 }
diff --git a/test.css b/test.css
 html {
  margin: 0;
  padding: 0;
 }

 body {
  position: relative;
 }



 div {
  padding: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
 }

 .bigger {
  position: absolute;
  width: 50%;
  height: 50%;
  background: lightgrey;
  top: 50px;
 }

 .red {
  background: red;
 }

 .blue {
  background: blue;
 }

 .green {
  background: green;
 }

 .yellow {
  background: yellow;
 }

 .insideRed,
 .insideBlue,
 .insideGreen,
 .insideYellow {
  position: relative;
 }

 .insideRed {
  background: red;
 }

 .insideBlue {
  background: blue;
 }

 .insideGreen {
  background: green;
 }

 .insideYellow {
  background: yellow;
 }



diff --git a/test.html b/test.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="test.css">
    <title>Test</title>
    
  </head>
  <body>
  <!--   <div class="background"></div>
    <div class="bigger">
      <div class="red">
        <div class="insideRed"></div>
        <div class="insideBlue"></div>
        <div class="insideGreen"></div>
        <div class="insideYellow"></div>
      </div>
      <div class="blue">
        <div class="insideRed"></div>
        <div class="insideBlue"></div>
        <div class="insideGreen"></div>
        <div class="insideYellow"></div>
      </div>
      <div class="green">
        <div class="insideRed"></div>
        <div class="insideBlue"></div>
        <div class="insideGreen"></div>
        <div class="insideYellow"></div>
      </div>
      <div class="yellow">
        <div class="insideRed"></div>
        <div class="insideBlue"></div>
        <div class="insideGreen"></div>
        <div class="insideYellow"></div>
      </div>
    </div> -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="test.js"></script>
  </body>
 </html>
diff --git a/test.js b/test.js
 $(function(){
  new MakeBox('<div class="red"></div>', 100, 100)
 });

 function MakeBox(clickable){
  this.clickable = $(clickable);
  $('body').append(this.clickable)
  this.clickable.hover(function(){
    var rand =  Math.floor(Math.random() * 4)
    console.log("I'm Kanye")
    if(rand < 1){
      var one = new MakeBox(clickable);
      one.clickable.animate({'top': '+=100px'}, 200)
    }
    else if(rand < 2){
      var one = new MakeBox(clickable);
      one.clickable.animate({'left': '+=100px'}, 200)
    }
    else if(rand < 3){
      new MakeBox(clickable);
    }
    else{
      new MakeBox(clickable);
    }
    this.remove();
  })
 }
	// Shorthand for $(document).ready();
	$(function(){
	// Your code goes here...
	$('#previous_frame').click(function(event){
	event.preventDefault();
	$('.frames').animate({"right": "100%"}, 1000, function(){
	$(this).animate({"right": "70%"}, 300, function(){
	$(this).animate({"right": "110%"}, 200, function(){
	$(this).append($('.frames li:first-child').remove()).css("right", 0)
	})
	})
	});
	});

	$('#next_frame').click(function(event){
	event.preventDefault();
	$('.frames').prepend($('.frames li:last-child').remove()).css("right", "100%").animate({"right" : 0}, 200)
	})
	});
	<!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%;
	border-radius: 5em;
	}

	.frames{
	list-style:none;
	position: relative;
	width:300%;
	overflow:hidden;
	padding:0;
	margin: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;
	}
	html {
	margin: 0;
	padding: 0;
	}

	body {
	position: relative;
	}



	div {
	padding: 0;
	position: absolute;
	width: 100px;
	height: 100px;
	display: inline-block;
	}

	.bigger {
	position: absolute;
	width: 50%;
	height: 50%;
	background: lightgrey;
	top: 50px;
	}

	.red {
	background: red;
	}

	.blue {
	background: blue;
	}

	.green {
	background: green;
	}

	.yellow {
	background: yellow;
	}

	.insideRed,
	.insideBlue,
	.insideGreen,
	.insideYellow {
	position: relative;
	}

	.insideRed {
	background: red;
	}

	.insideBlue {
	background: blue;
	}

	.insideGreen {
	background: green;
	}

	.insideYellow {
	background: yellow;
	}
	$(function(){
	new MakeBox('<div class="red"></div>', 100, 100)
	});

	function MakeBox(clickable){
	this.clickable = $(clickable);
	$('body').append(this.clickable)
	this.clickable.hover(function(){
	var rand = Math.floor(Math.random() * 4)
	console.log("I'm Kanye")
	if(rand < 1){
	var one = new MakeBox(clickable);
	one.clickable.animate({'top': '+=100px'}, 200)
	}
	else if(rand < 2){
	var one = new MakeBox(clickable);
	one.clickable.animate({'left': '+=100px'}, 200)
	}
	else if(rand < 3){
	new MakeBox(clickable);
	}
	else{
	new MakeBox(clickable);
	}
	this.remove();
	})
	}