Создание слайдера
 

Всем здравствуйте!
В программировании не силен, поэтому прошу указать мою ошибку.
Задача: создать слайдер из нескольких картинок, при наведении на который картинки приостанавливает свое исчезновение/появление. Написал код, который работает нормально. Однако случайно обнаружил, что, если при смене последней картинки на первую навести курсор мыши, то слайдер приостанавливает работу, а при отведении возобновляет свою работу только при повторном выполнении функции SlideRotate(), т.е. через 12 сек (4 картинки в слайдере, смена которых происходит через каждые 3 сек). Надеюсь, что не коряво объяснил. Буду благодарен за помощь!

<div id="slider">
<ul>
<li><a href="#"><img src="img/HomePage/01-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
<li><a href="#"><img src="img/HomePage/02-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
<li><a href="#"><img src="img/HomePage/03-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
<li><a href="#"><img src="img/HomePage/04-Slider_v.1.jpg" width="780" height="334" alt="" border="0"/></a></li>
</ul>
</div>

var SliderImg = 4; /*общее количество картинок в слайдере*/
var NumberSlider =1; /*текущая картинка в слайдере*/
function TheSlide() {
    $('#slider ul li').hide(); /*скрыть все картинки из слайдера*/
    $('#slider ul li:nth-child('+NumberSlider+')').fadeIn(200); /*показать картинку с номером NumberSlider*/
    var id = setInterval(SlideRotate,3000);
    $('#slider ul li').hover(
function(){$(this).stop().fadeTo(200, 0.7); clearInterval(id)},
function(){$(this).stop().fadeTo(200, 1); id = setInterval(SlideRotate,3000)});
};
function SlideRotate() {
    $('#slider ul li:nth-child('+NumberSlider+')').fadeOut(1000);
    NumberSlider = (NumberSlider < SliderImg) ? (NumberSlider + 1) : 1;
    $('#slider ul li:nth-child('+NumberSlider+')').fadeIn(1000);
};