A CodePen by Taufik Nurrohman.

index.html

<figure id="slider">
  <div class="container">
		<img src="http://lorempixel.com/300/200/food/1" alt="Lorem ipsum dolor sit amet...">
		<img src="http://lorempixel.com/300/200/food/2" alt="Consectetuer adipiscing elit...">
		<img src="http://lorempixel.com/300/200/food/3" alt="Sed diam nonummy nibh euismod tincidunt...">
		<img src="http://lorempixel.com/300/200/food/4" alt="Ut laoreet dolore magna aliquam erat volutpat...">
	</div>
	<figcaption></figcaption> <!-- slideshow caption -->
</figure>
<nav id="slider-nav"></nav>

script.js

(function($) {

  // Cache all the slideshow element and the dimension
	var $slider = $('#slider'),
		$caption = $slider.find('figcaption'),
		$container = $slider.find('.container'),
		$nav = $('#slider-nav'),
		$slide = $container.children(),
		s_length = $slide.length,
		s_wide = $slider.width() * s_length,
		s_height = $slider.height(),
		autoSlide = null;

	$container.css({
		'position':'relative',
		'width':s_wide,
		'height':s_height
	});

	// Auto append navigation menu item based on the slideshow length
	$slide.each(function(index) {
		var i = index + 1;
		$nav.append('<a href="#slide-'+i+'">'+i+'</a>');
		$(this).attr('id', 'slide-'+i);
	});

	// Click to switch the slide
	$nav.find('a').on("click", function() {
		$nav.find('.active').removeClass('active');
		$(this).addClass('active');
		var pos = $(this).index() * $slider.width(),
			text = $slide.eq($(this).index()).attr('alt');
		$caption.stop().animate({bottom:'-100px'}, 400);
		$container.stop().animate({left:'-'+pos+'px'}, 600, function() {
			$caption.html(text).stop().animate({bottom:'0'}, 400);
		});
		clearInterval(autoSlide);
		autoSlide = setInterval(slideShow, 3000);
		return false;
	}).first().addClass('active');

	// Slideshow init...
  // Show the caption with the first image `alt` attribute value
	$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, 600);

	// Auto click the slideshow navigation with setInterval()
	function slideShow() {
		if ($nav.find('.active').next().length) {
			$nav.find('.active').next().trigger("click");
		} else {
			$nav.find('a').first().trigger("click");
		}
	}

	$(window).on("load", function() {
		// Show the container, caption and navigation after page has been loaded!
		$container.show();
		$caption.show();
		$nav.css('opacity',1);
		// Then run the interval...
		autoSlide = setInterval(slideShow, 3000);
	});

})(jQuery);

style.css

* {margin:0;padding:0}

body {
  background-color:#DEDBC6;
  padding:50px;
}

/* Slider */
#slider {
  display:block;
  width:300px; /* slider width */
  height:200px;; /* slider height */
  margin:50px auto 0;
  background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
  overflow:hidden; /* Hide the overflowed element from the container */
  position:relative;
}

/* For caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* hide the caption with this way */
  left:0;
  z-index:4;
}

#slider img {
  display:block;
  margin:0 0;
  width:300px; /* slider width */
  height:200px; /* slider height */
  float:left;
}

/* Navigation */
#slider-nav {
  display:block;
  width:300px;
  margin:10px auto;
  text-align:center;
}

#slider-nav a {
  display:inline-block;
  width:15px;
  height:15px;
  background-color:#bbb;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}

#slider-nav .active {
  background-color:#6A7E00;
}

/* Hide some important element until window as been loaded */
#slider .container,
#slider figcaption {display:none}
#slider-nav {opacity:0}