taryneast/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #Image Carousel App
You will construct an image carousel from the spec provided below.
Make one like the carousel provided by Bootstrap ( http://getbootstrap.com/2.3.2/javascript.html#carousel) - but you will be building yours from scratch
##Specification:

We are going to rebuild this from scratch.
Add event listeners for mouseover and mouseexit to change the opacity of the next and previous buttons.
Implement the toLeft and toRight functions that will move the margin to display either the next or previous image.

Bonus


Get the animation working so that the images slide across rather than just appearing

You will need to find a set of images that are roughly the same size to use in your carousel.
The example html assumes you'll have one for London, NYC and SF... you can have whatever you like.

  
## carousel.css
body {
  font-family: Helvetica, Arial, sans-serif;
}

#window {
  position: relative;
  width: 612px;
  height: 612px;
  margin: auto;
  overflow: hidden;
}

#carousel {
  position: absolute;
  display: inline-block;
  width: 1836px;
  height: 100%;
}

#carousel img {
  float: left;
}

.carousel-direction {
  position: absolute;
  left: 10px;
  top: 40%;
  width: 40px;
  height: 40px;
  color: #ffffff;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  opacity: 0.5;
  border-radius: 23px;
  z-index: 5;
  text-decoration: none;
}

#next {
  right: 15px;
  left: auto;
}

## carousel.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Image Carousel</title>
    <link rel="stylesheet" href="carousel.css">
  </head>
  <body>
    <div id="window">
      <div id="carousel">
        <img src="img/nyc.jpg" id="img1" alt="New York">
        <img src="img/sf.jpg" id="img2" alt="San Francisco">
        <img src="img/lon.jpg" id="img3" alt="London">
      </div>
      <a class="carousel-direction" id="previous">&lt;</a>
      <a class="carousel-direction" id="next">&gt;</a>
    </div>
    <script src="carousel.js"></script>
  </body>
</html>


## carousel.js
var carousel = document.getElementById('carousel');
var next = document.getElementById('next');
var previous = document.getElementById('previous');

carousel.style.marginLeft = 0;

// Slides the images to the left or goes back to the first image if it has reached the end
function toLeft(){
}


// Slides the images to the right or goes back to the last image if it has reached the end
function toRight(){
}

//Hook up the next and previous buttons to call the toLeft and toRight functions
	body {
	font-family: Helvetica, Arial, sans-serif;
	}

	#window {
	position: relative;
	width: 612px;
	height: 612px;
	margin: auto;
	overflow: hidden;
	}

	#carousel {
	position: absolute;
	display: inline-block;
	width: 1836px;
	height: 100%;
	}

	#carousel img {
	float: left;
	}

	.carousel-direction {
	position: absolute;
	left: 10px;
	top: 40%;
	width: 40px;
	height: 40px;
	color: #ffffff;
	font-size: 60px;
	font-weight: 100;
	line-height: 30px;
	text-align: center;
	background: #222222;
	border: 3px solid #ffffff;
	opacity: 0.5;
	border-radius: 23px;
	z-index: 5;
	text-decoration: none;
	}

	#next {
	right: 15px;
	left: auto;
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Image Carousel</title>
	<link rel="stylesheet" href="carousel.css">
	</head>
	<body>
	<div id="window">
	<div id="carousel">
	<img src="img/nyc.jpg" id="img1" alt="New York">
	<img src="img/sf.jpg" id="img2" alt="San Francisco">
	<img src="img/lon.jpg" id="img3" alt="London">
	</div>
	<a class="carousel-direction" id="previous"><</a>
	<a class="carousel-direction" id="next">></a>
	</div>
	<script src="carousel.js"></script>
	</body>
	</html>
	var carousel = document.getElementById('carousel');
	var next = document.getElementById('next');
	var previous = document.getElementById('previous');

	carousel.style.marginLeft = 0;

	// Slides the images to the left or goes back to the first image if it has reached the end
	function toLeft(){
	}


	// Slides the images to the right or goes back to the last image if it has reached the end
	function toRight(){
	}

	//Hook up the next and previous buttons to call the toLeft and toRight functions