JS слайд-шоу не работает

Question

Я делаю простой слайд-шоу из учебника: http://line25.com/tutorials/how-to-build-a-sliding-feature-slideshow-with-jquery

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

ЖИВОЙ DEMO: http://epicureancateringaz.com/New/new1

// JavaScript Document 
$(document).ready(function() { 
$("#slideshow").css("overflow", "hidden"); 
$("#slideshow-nav").css("visability", "visable"); 
$("#slideshow-nav a[href=#photos1]").addClass("active"); 

$("#slideshow-nav").localScroll({ 
    target:'#slideshow', axis: 'x' 
}); 

$("#slideshow-nav a").click(function(){ 
    $("#slideshow-nav a").removeClass("active"); 
    $(this).addClass("active"); 
}); 
}); 

//css 
#slideshow{ 
width:1000px; 
height:320px; 
margin:auto; 
box-shadow:0px 0px 80px #000; 
-moz-box-shadow:0px 0px 80px #000; 
-webkit-box-shadow:0px 0px 80px #000; 
} 
#slideshow ul{ 
width:4000px; 
list-style:none; 
} 
#slideshow ul li{ 
float:left; 
} 
#slideshow-nav{ 
width:250px; 
margin:0 auto 200px auto; 
} 
#slideshow-nav ul{ 
list-style:none;  
} 
#slideshow-nav ul li{ 
float:left; 
} 
#slideshow-nav ul li a{ 
display:block; 
width:30px; 
height:30px; 
float:left; 
margin:0 10px; 
background-color:#fff; 
border-radius:30px; 
-moz-border-radius:30px; 
-webkit-border-radius:30px; 
box-shadow:0px 0px 30px #000; 
-moz-box-shadow:0px 0px 30px #000; 
-webkit-box-shadow:0px 0px 30px #000; 
} 
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active{ 
background-color:#a89d8a; 
} 

//html 
<div id="slideshow"> 
     <ul> 
    <li id="photos1"><a href=""><img src="images/photos/1.jpg" alt="img 1" /></a></li> 
    <li id="photos2"><a href=""><img src="images/photos/2.jpg" alt="img 2" /></a></li> 
    <li id="photos3"><a href=""><img src="images/photos/3.jpg" alt="img 3" /></a></li> 
    <li id="photos4"><a href=""><img src="images/photos/4.jpg" alt="img 4" /></a></li> 
     </ul> 
    </div> 
    <div id="slideshow-nav"> 
     <ul> 
      <li><a href="#photos1"></a></li> 
      <li><a href="#photos2"></a></li> 
      <li><a href="#photos3"></a></li> 
      <li><a href="#photos4"></a></li> 
     </ul> 
    </div> 

Answer 1

Я вижу ошибку в консоли:

Uncaught TypeError: Object [object Object] has no method 'localScroll' script.js:7 

Вы забыли включить jQuery.LocalScroll

загрузить эту библиотеку, поместите его в папку JS и вставить его в голову тег

<script src="js/jQuery.LocalScroll.js"></script> 

Answer 2

Первое, что вы не localScroll плагин на вашей странице.

<script src="js/jQuery.LocalScroll.js"></script> 

по учебному пособию вы должны иметь его.

А затем изменить обработчик события $ («# слайд-нав в») в

$("#slideshow-nav a").click(function(e){ 
    e.preventDefault(); 
    $("#slideshow-nav a").removeClass("active"); 
    $(this).addClass("active"); 
}); 

так экран не будет идти вниз.