// starting the script on page load
$(document).ready(function () {
  $('#slideshow li').hide();
  $('#slideshow img').hide();
  $('#slideshow .caption').hide();
  startSlideShow();
});

function startSlideShow() {
  var $active = $('#slideshow li.selected');
  $active.show();
  $active.find('.caption').slideToggle(1000);
  $active.find('img').fadeIn(500);
  setInterval("slideShow()", 10000);
}

function slideShow() {
  var $active = $('#slideshow li.selected');
  var $next = $active.next().length ? $active.next() : $('#slideshow li:first');
  $active.find('img').fadeOut(1000);
  $active.find('.caption').slideToggle(1000, function () {
    $active.hide();
    $active.removeClass('selected');
    $next.show();
    $next.find('.caption').slideToggle(1000);
    $next.find('img').fadeIn(500);
    $next.addClass('selected');
  });
}