JQuery newb stuck with a slider

JQuery newb stuck with a slider

Hi everyone, I'm hoping I might get some help with this, I'm completely stuck. I have only learned HTML/CSS in the last two months, and I'm trying to get to grips with JQuery. I am trying to make a slider, but the behaviour of it is erratic. I want the text to slide to each link, but it is not. Here is the code I have:

 <ul class="pure-paginator">
      <li><a class="pure-button prev" href="#">&#171;</a></li>
      <li><a class="pure-button" href="#home">1</a></li>
      <li><a class="pure-button pure-button-active" href="#newsletter">2</a></li>
      <li><a class="pure-button" href="#directions">3</a></li>
      <li><a class="pure-button" href="#contact">4</a></li>
      <li><a class="pure-button next" href="#">&#187;</a></li>
    </ul>


ul.pure-paginator { 
  position: absolute; 
  line-height: 45px; 
  margin: 0 30px; 
  padding: 0;
  right:0;
  top: 0;
} 

ul.pure-paginator li { display: inline; }

$(document).ready(function() { 
  $(".pure-paginator a").click(function(preventDefault) { 
    var target = $(this).attr("href"); 
    $(".box").animate({scrollLeft: $(target).offset().left}, 1200);
  });
});


If anyone could give me a pointer, I'd greatly appreciate it. Many thanks.