Jquery Horizontal Scroll on Click

Question

I am trying to get this horizontal section of the page to auto scroll when the left or right arrows are clicked. I can get the Jquery code to run correctly in the console. However, the auto scroll events won't run at all on my page. Could anyone provide any insight into this issue?

The code is as follows :

HTML

<div class = "horizon horizon-prev">
      <img src = "../images/left-arrow.png" />
    </div>
    <div class = "horizon horizon-next">
      <img src = "../images/right-arrow.png" />
    </div>

  <div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
       <div class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
    </div>

CSS

div.center {
 width: 90%;
 height: 210px;
 border: 1px solid #000;
 margin: auto;
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap;
  }
  div.internal {
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   text-align: center;
  }

Jquery

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=775px"
  }, "slow");
});

 $('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
   scrollLeft: "+=775px"
  }, "slow");
});

Answer 1

(based on looking at your site sethspivey.com)

You need to add the missing event parameter you are using, and also move the click handlers into document.ready, like so:

$(function() {
  $('.horizon-prev').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "-=775px"
    }, "slow");
  });

   $('.horizon-next').click(function(event) {
    event.preventDefault();
    $('#content').animate({
     scrollLeft: "+=775px"
    }, "slow");
  });
});