horizontal jquery arrows navigation next previous

horizontal jquery arrows navigation next previous

Hello,
I'm trying to implante right and left arrows navigation on my horizontal webpage but the problem nothing happens when I click on arrows. Here's my fiddle in case of :  http://jsfiddle.net/jarod51/StZR4/9/

Do you have any idea how to solve it ?

My jquery code is :  
  1. $(document).ready(function() { var $item = $('div.slide'), //Cache your DOM selector visible = 1, //Set the number of items that will be visible index = 0, //Starting index endIndex = ( $item.length / visible ) - 1; $('.flscrolld').click(function(){ if(index < endIndex ){ index++; $item.animate({'left':'-=300px'}); } }); $('.flscrolll').click(function(){ if(index > 0){ index--; $item.animate({'left':'+=300px'}); } }); });

I defined my previous and next arrows like that in my css :
  2. .flscroll {
  3.         display:block;
  4.         height: 83px;
  5.         opacity: 0.8;
  6.         position: fixed;
  7.         top: 40%;
  8.         z-index: 1000;
  9.     }
  10.     .ie8 .flscroll {
  11.         filter: alpha(opacity=80);
  12.     }
  13.     #flscrollg {
  14.         background: url(images/sprite.png) no-repeat 50px -100px;
  15.         left: -30px;
  16.         padding-left: 50px;
  17.         width: 52px;
  18.     }
  19.     #flscrolld {
  20.         background: url(images/sprite.png) no-repeat left -200px;
  21.         padding-right: 50px;
  22.         right: -30px;
  23.         width: 53px;
  24.     }
the structure of my html looks like that :

  2. <!--the menu-->
  3.   <div id="banner">
  4.  <ul>
  5.          <li><a href="#home">Home</a></li>  
  6.          <li><a href="#newsletter">Newsletter</a></li>  
  7.          <li><a href="#directions">Directions &amp; Opening Hours</a></li>  
  8.          <li><a href="#contact">Contact us</a></li>
  9. </ul>
  10. </div>
  11. <!--end of the menu-->

  13. <!--arrows nav-->
  14.         <a href="#1" title="Page precédente" class="flscroll" id="flscrollg">&nbsp;</a>
  15.         <a href="#1" title="Page suivante" class="flscroll" id="flscrolld">&nbsp;</a>
  16. <!--end arrows-->

  18.         <div id="wrap">
  19.         
  20. <div id="slide">
  21.         <div id="home" class="panel item1">
  22.         <div class="inner inner1"></div>
  23.         </div>
  24. </div>

  26. <div id="slide">
  27.         <div id="newsletter" class="panel item2">
  28.         <div class="inner inner2"></div>
  29.         <div class="inner-lev1 inner2a"></div>
  30.         <div class="inner-lev2 inner2b"></div>
  31.         </div>
  32.         </div>
  33. </div>
Regards,
Jarod.