[jQuery] Efektowny slider z użyciem klawiatury

<div id="prezentacja">
<div id="lewa"><a href="javascript:slide('left');"><img src="left.png" /></a></div>
<div id="slider">
<ul id="slider_lista">
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="ja.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="ja.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
<li><a href="#"><img src="avatar.jpg" /></a></li>
</ul></div>
<div id="prawa"><a href="javascript:slide('right');"><img src="right.png" /></a></div>
<input type="hidden" id="hidden_auto_slide_seconds" value=0 />
</div>

$(document).ready(function() {
 
        //opcje( 1 - włączony , 0 - wyłączony)
        var auto_slide = 1;
            var hover_pause = 1;
        var key_slide = 1;
 
        //prędkość przewijania
        var auto_slide_seconds = 5000;
        //UWAGA: wartości czasowe podajemy w milisekundach
 
        //przesuń obiekt z ostatniego miejsca na miejsce przed pierwszym. Chodzi o to, żeby użytkownik widział wszystkie pozycje ze slidera bez przerwy.
        $('#slider_lista li:first').before($('#slider_lista li:last')); 
 
        //sprawdzenie czy auto-sliding jest włączony
        if(auto_slide == 1){
            var timer = setInterval('slide("right")', auto_slide_seconds);
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }
 
        //sprawdzenie czy pauza w efekcie hover jest włączona
        if(hover_pause == 1){
            $('#slider_lista').hover(function(){
                //zatrzymanie przesuwania gdy :hover
                clearInterval(timer)
            },function(){
                //włączenie ruchu
                timer = setInterval('slide("right")', auto_slide_seconds);
            });
 
        }
 
        //sprawdzenie czy obsługa klawiszy jest włączona
        if(key_slide == 1){
 
            //ustawianie przycisków do interakcji
            $(document).bind('keypress', function(e) {
                //kod przycisku "strzałka w lewo" to: 37, a "strzałka w prawo" to: 39
                if(e.keyCode==37){
                        //przesuń w lewo
                        slide('left');
                }else if(e.keyCode==39){
                        //przesuń w prawo
                        slide('right');
                }
            });
        }
  });
 
//funkcja przesuwania
function slide(where){
 
            //pobieranie szerokości pojedynczego obiektu
            var item_width = $('#slider_lista li').outerWidth() + 10;
 
            //sprawdzenie czy animacja ma iść w prawo czy w lewo
            if(where == 'left'){
                //kalkulacja ruchu w lewo
                var left_indent = parseInt($('#slider_lista').css('left')) + item_width;
            }else{
                //kalkulacja ruchu w prawo
                var left_indent = parseInt($('#slider_lista').css('left')) - item_width;
 
            }
 
            //efekt przesuwania z użyciem biblioteki jQuery
            $('#slider_lista:not(:animated)').animate({'left' : left_indent},500,function(){    
 
                //tworzenie iluzji nieskończonej prezentacji
                if(where == 'left'){
                    $('#slider_lista li:first').before($('#slider_lista li:last'));
                }else{
                    $('#slider_lista li:last').after($('#slider_lista li:first'));
                }
 
                $('#slider_lista').css({'left' : '-90px'});
            });
}

#slider {
	float:left;
	width:630px;
	overflow: hidden;
	background: #F0F0F0;
}
 
#slider_lista {
	position:relative;
	left:-90px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width:9999px;
	padding-bottom:10px;
}
 
#slider_lista li{
	float: left;
	width:80px;
	padding:0px;
	height:80px;
	background: #000000;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:5px;
	margin-right:5px;
}
 
#slider_lista li img {
	.margin-bottom:-4px; /*specjalny trick dla IE*/
	cursor:pointer;
	cursor: hand;
	border:0px;
}
#lewa, #prawa{
	float:left;
	height:130px;
	padding-top: 22px;
	width:64px;
}
#lewa img, #prawa img{
	border:0;
	cursor: pointer;
	cursor: hand;
}