Написание зацикленного слайдера

[mue]

Есть список li, необходимо сделать слайдер. В слайдере одновременно показываются 4 li. При наведении на слайдер изображения дожны постоянно перемещаться влево. За последней li сразу же должна идти первая и так по кругу до бесконечности.

При загрузке страницы я добавляю справа от li копию таких же li и перемещаю весь список влево с помощью

jQuery('.gallery').animate({
left: leftPoz
}, 3000);

Проблема заключается в том, что я не пойму как при достижении left определенного значения брать первые li, которые уже ушли из видимости и перемещать их назад.

Может сама логика слайдера у меня не правильная. Подскажите как справится с этой задачей.

[FINoM]

Есть плагин с каруселью, но он мне кажется бредом из-за того, что анимируется каждый объект карусели. Вот пару недель назад делал нормальную карусель, где анимируется только родитель:

<div id="carousel">
			<div id="carousel_items">
			  <span style="background-position: 0px 0px;" title="Germanwings"></span>
			  <span style="background-position: 0px -420px;" title="Opodo"></span>
			  <span style="background-position: 0px -30px;" title="Air Berlin"></span>
			  <span style="background-position: 0px -450px;" title="Expedia"></span>
			  <span style="background-position: 0px -60px;" title="Ryanair"></span>
			  <span style="background-position: 0px -480px;" title="lastminute"></span>
			  <span style="background-position: 0px -90px;" title="Sunexpress"></span>
			  <span style="background-position: 0px -510px;" title="l'tur"></span>
			  <span style="background-position: 0px -120px;" title="easyJet"></span>
			  <span style="background-position: 0px -540px;" title="eBookers"></span>
			  <span style="background-position: 0px -150px;" title="Condor"></span>
			  <span style="background-position: 0px -570px;" title="Bravofly"></span>
			  <span style="background-position: 0px -180px;" title="TUIfly"></span>
			  <span style="background-position: 0px -600px;" title="govolo"></span>
			  <span style="background-position: 0px -210px;" title="Lufthansa"></span>
			  <span style="background-position: 0px -630px;" title="Flugladen.de"></span>
			  <span style="background-position: 0px -240px;" title="SWISS"></span>
			  <span style="background-position: 0px -660px;" title="Skytours"></span>
			  <span style="background-position: 0px -270px;" title="Turkish Airlines"></span>
			  <span style="background-position: 0px -690px;" title="geruxx"></span>
			  <span style="background-position: 0px -300px;" title="Austrian Airlines"></span>
			  <span style="background-position: 0px -330px;" title="LOT Polish Airlines"></span>
			  <span style="background-position: 0px -360px;" title="Qatar Airways"></span>
			  <span style="background-position: 0px -390px;" title="Emirates"></span>
			</div>
		</div>

#carousel{
		height: 32px;
		overflow: hidden;
		width: 645px;
		margin: 30px 0 30px 0;
		position: relative;
		white-space:nowrap;
		margin-top: -40px;
	}
	#carousel_items{
		height: 32px;
		margin-left: 0px;
		position: relative;
		left: 0;
		white-space:nowrap;
		display: inline-block;
	}
	#carousel_items span{
		display: inline-block;
		width: 100px;
		height: 30px;
		//float: left;
		padding: 0 0 0 0;
		margin: 0 7px 0 0;
		opacity: 0.5;
		filter: alpha(opacity=50);
		border: 1px solid #C7DCE2;
		height: 30px;
		
		background-image:url(/images/logo-caroussel.jpg);
		background-repeat:no-repeat;
	}
	
	#carousel_items span:hover {
		opacity: 1;
		filter: alpha(opacity=100);
	}

(function logoCarousel() {
		var carouselPixelsPerSecond = 5;
		var carousel = $('#carousel');
		var carouselItems = $('#carousel_items', carousel);
		var carouselItemsContainer = $('#carousel_items-container', carousel);
		
		var carouselWidth = carousel.width();
		var carouselItemsWidth = carouselItems.width();

		
		var infiniteCarousel = function(carouselItems, carouselItemsClone){
			!carouselItemsClone && (carouselItemsClone = carouselItems.clone().insertAfter(carouselItems));
			
			carouselItems.animate({
				marginLeft: -carouselItemsWidth
			},{
				duration: 180000,
				specialEasing: {
					marginLeft: 'linear'
				},
				complete: function(){
					carouselItems.insertAfter(carouselItemsClone).css({
						marginLeft: 0
					});
					infiniteCarousel(carouselItemsClone, carouselItems);
				}
			});
		}
		
		infiniteCarousel(carouselItems);
	})();

Вдруг поможет. Css немного мусорный, надо переделать

P. S. Как скрывать большие куски кода?