I am trying to obtain horizontal scroll using buttons.

I have a container which has several divs stacked horizontally and I want to scroll through them using the buttons given.

Please take a look at my attemp and tell me what I am doing wrong.

HTML:

   <div class=left>

      left div

      <button id=left-button>

        swipe left

      </button>

    </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>

    <div class=right>

    <button id=right-button>

        swipe right

      </button>

      right div

    </div>

JQUERY:

  $('#right-button').click(function() {

      event.preventDefault();

      $('#content').animate({

        marginLeft: +=200px

      }, slow);

   });



     $('#left-button').click(function() {

      event.preventDefault();

      $('#content').animate({

        marginLeft: -=200px

      }, slow);

   });

http://plnkr.co/edit/GxufhJaRJn2SfGb4ilIl?p=preview

I have tried the solutions that I have found online. But my container keeps shifting even though I am trying to fix it.