Нужна помощь со слайдером

Имеется слайдер:

HTML:

<div class="slyder">

	<div class='viewport'>

		<ul class='slidewrapper' data-current=0>

			<li>

				<img width="1341px" height="470px" src="img/photo/11.jpg" alt="Слайд 1">

				<div class="box">

					<h4>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h4>

					<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus. </p>

				</div>

			</li>

			<li>

				<img width="1341px" height="470px" src="img/photo/22.jpg" alt="Слайд 2">

				<div class="box">

					<h4>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h4>

					<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus. </p>

				</div>

			</li>

			<li>

				<img width="1341px" height="470px" src="img/photo/33.jpg" alt="Слайд 3">

				<div class="box">

					<h4>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h4>

					<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus. </p>

				</div>

			</li>

			<li>

				<img width="1341px" height="470px" src="img/photo/33.jpg" alt="Слайд 3">

				<div class="box">

					<h4>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h4>

					<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus. </p>

				</div>

			</li>

			<li>

				<img width="1341px" height="470px" src="img/photo/33.jpg" alt="Слайд 3">

				<div class="box">

					<h4>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h4>

					<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus. </p>

				</div>

			</li>

			<li>

				<img width="1341px" height="470px" src="img/photo/33.jpg" alt="Слайд 3">

				<div class="box">

					<h4>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</h4>

					<p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus. </p>

				</div>

			</li>

		</ul>

	</div>

	<a href='javascript: void(0)' id='prev_slide'>&nbsp;</a>

	<a href='javascript: void(0)' id='next_slide'>&nbsp;</a>

</div>

Скрипт:

var slideWidth=1341;

var sliderTimer;

$(function(){

$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);

    sliderTimer=setInterval(nextSlide,5000);

	$('.viewport').hover(function(){

        clearInterval(sliderTimer);

    },function(){

        sliderTimer=setInterval(nextSlide,5000);

    });

    $('#next_slide').click(function(){

        clearInterval(sliderTimer);

        nextSlide();

        sliderTimer=setInterval(nextSlide,5000);

    });

    $('#prev_slide').click(function(){

        clearInterval(sliderTimer);

        prevSlide();

        sliderTimer=setInterval(nextSlide,5000);

    });

});



function nextSlide(){

    var currentSlide=parseInt($('.slidewrapper').data('current'));

    currentSlide++;

    if(currentSlide>=$('.slidewrapper').children().size())

    {

        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  

        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 

        $('.slidewrapper').children().first().remove();

        currentSlide--;                        

    }

        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);

    

    

}



function prevSlide(){

    var currentSlide=parseInt($('.slidewrapper').data('current'));

    currentSlide--;

    if(currentSlide<0)

    {

        $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth);  

        $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); 

        $('.slidewrapper').children().last().remove();

        currentSlide++;   

    }

    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);

}

Слейдер листает картинки, поверх них есть блок div. По умолчанию он стоит display:none. Хотелось бы что бы он появлялся с задержкой в секунду на каждом новом слайде. Если кто-то поможет это настроить буду благодарен...