garethredfern/slider.html

## slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple Image Slider</title>
<style>
.gallery { position: relative; width: 400px; height: 200px; }
.gallery figure {
    top: 0;
    left: 0;
    width: 400px;
    height: 200px;
    position: absolute;
}
.gallery figcaption {
    left: 0;
    bottom: 0;
    color: #FFF;
    width: 390px;
    padding: 5px;
    position: absolute;
    background-color: #323232;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>

<div class="gallery">
    <figure>
        <img src="http://flickholdr.com/400/200/sea" alt="">
        <figcaption>Title One</figcaption>
    </figure>
    <figure>
        <img src="http://flickholdr.com/400/200/sun" alt="">
        <figcaption>Title Two</figcaption>
    </figure>
    <figure>
        <img src="http://flickholdr.com/400/200/sand" alt="">
        <figcaption>Title Three</figcaption>
    </figure>
</div>

</body>
<script src="slider.js"></script>
</html>

## slider.js
(function() {

  var imgCount = $('.gallery figure').length;

  console.log(imgCount);

  if (imgCount > 1) {

    $('.gallery figure:gt(0)').hide();

    setInterval(function() {
      $('.gallery figure:first-child').fadeOut('slow')
         .next('figure').fadeIn('slow')
         .end().appendTo('.gallery');
       },5000);
   }

})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Simple Image Slider</title>
	<style>
	.gallery { position: relative; width: 400px; height: 200px; }
	.gallery figure {
	top: 0;
	left: 0;
	width: 400px;
	height: 200px;
	position: absolute;
	}
	.gallery figcaption {
	left: 0;
	bottom: 0;
	color: #FFF;
	width: 390px;
	padding: 5px;
	position: absolute;
	background-color: #323232;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	</head>
	<body>

	<div class="gallery">
	<figure>
	<img src="http://flickholdr.com/400/200/sea" alt="">
	<figcaption>Title One</figcaption>
	</figure>
	<figure>
	<img src="http://flickholdr.com/400/200/sun" alt="">
	<figcaption>Title Two</figcaption>
	</figure>
	<figure>
	<img src="http://flickholdr.com/400/200/sand" alt="">
	<figcaption>Title Three</figcaption>
	</figure>
	</div>

	</body>
	<script src="slider.js"></script>
	</html>
	(function() {

	var imgCount = $('.gallery figure').length;

	console.log(imgCount);

	if (imgCount > 1) {

	$('.gallery figure:gt(0)').hide();

	setInterval(function() {
	$('.gallery figure:first-child').fadeOut('slow')
	.next('figure').fadeIn('slow')
	.end().appendTo('.gallery');
	},5000);
	}

	})();