yh2n/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
* {
  box-sizing: border-box;
}

main {
  padding: 30px;
  min-width: 250px;
}

.hero {
  height: 200px;
  margin-bottom: 20px;
}

.hero img {
  height: 100%
}


.thumbnail {
  display: inline-block;
  cursor: pointer;
  height: 60px;
}

a.thumbnail:hover {
  box-shadow: 5px 5px 5px gray;
}

.thumbnail img {
  max-height: 100%;
}
</style>
</head>
<body>
<main>
  <h1>Image Carousel</h1>
  <div class="hero">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="" />
  </div>
  <div class="thumbnails">
    <a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="" /></a>
    <a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="" /></a>
    <a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="" /></a>
    <a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="" /></a>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</main>
<script id="jsbin-javascript">
function handleThumbnailClicks() {
  $('.thumbnail').click(function(event) {
    var imgSrc = $(event.currentTarget).find('img').attr('src');
    $('.hero img').attr('src', imgSrc);
  })
}

$(function() {
  handleThumbnailClicks();
});
</script>


<script id="jsbin-source-css" type="text/css">* {
  box-sizing: border-box;
}

main {
  padding: 30px;
  min-width: 250px;
}

.hero {
  height: 200px;
  margin-bottom: 20px;
}

.hero img {
  height: 100%
}


.thumbnail {
  display: inline-block;
  cursor: pointer;
  height: 60px;
}

a.thumbnail:hover {
  box-shadow: 5px 5px 5px gray;
}

.thumbnail img {
  max-height: 100%;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function handleThumbnailClicks() {
  $('.thumbnail').click(function(event) {
    var imgSrc = $(event.currentTarget).find('img').attr('src');
    $('.hero img').attr('src', imgSrc);
  })
}

$(function() {
  handleThumbnailClicks();
});</script></body>
</html>

## jsbin.pefege.css
* {
  box-sizing: border-box;
}

main {
  padding: 30px;
  min-width: 250px;
}

.hero {
  height: 200px;
  margin-bottom: 20px;
}

.hero img {
  height: 100%
}


.thumbnail {
  display: inline-block;
  cursor: pointer;
  height: 60px;
}

a.thumbnail:hover {
  box-shadow: 5px 5px 5px gray;
}

.thumbnail img {
  max-height: 100%;
}

## jsbin.pefege.js
function handleThumbnailClicks() {
  $('.thumbnail').click(function(event) {
    var imgSrc = $(event.currentTarget).find('img').attr('src');
    $('.hero img').attr('src', imgSrc);
  })
}

$(function() {
  handleThumbnailClicks();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	* {
	box-sizing: border-box;
	}

	main {
	padding: 30px;
	min-width: 250px;
	}

	.hero {
	height: 200px;
	margin-bottom: 20px;
	}

	.hero img {
	height: 100%
	}


	.thumbnail {
	display: inline-block;
	cursor: pointer;
	height: 60px;
	}

	a.thumbnail:hover {
	box-shadow: 5px 5px 5px gray;
	}

	.thumbnail img {
	max-height: 100%;
	}
	</style>
	</head>
	<body>
	<main>
	<h1>Image Carousel</h1>
	<div class="hero">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="" />
	</div>
	<div class="thumbnails">
	<a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="" /></a>
	<a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="" /></a>
	<a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="" /></a>
	<a class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="" /></a>
	</div>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	</main>
	<script id="jsbin-javascript">
	function handleThumbnailClicks() {
	$('.thumbnail').click(function(event) {
	var imgSrc = $(event.currentTarget).find('img').attr('src');
	$('.hero img').attr('src', imgSrc);
	})
	}

	$(function() {
	handleThumbnailClicks();
	});
	</script>


	<script id="jsbin-source-css" type="text/css">* {
	box-sizing: border-box;
	}

	main {
	padding: 30px;
	min-width: 250px;
	}

	.hero {
	height: 200px;
	margin-bottom: 20px;
	}

	.hero img {
	height: 100%
	}


	.thumbnail {
	display: inline-block;
	cursor: pointer;
	height: 60px;
	}

	a.thumbnail:hover {
	box-shadow: 5px 5px 5px gray;
	}

	.thumbnail img {
	max-height: 100%;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">function handleThumbnailClicks() {
	$('.thumbnail').click(function(event) {
	var imgSrc = $(event.currentTarget).find('img').attr('src');
	$('.hero img').attr('src', imgSrc);
	})
	}

	$(function() {
	handleThumbnailClicks();
	});</script></body>
	</html>