Jquery Horizontal Scroll Using Buttons

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. Ple

Solution 1:

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

 $('#left-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

Edit, to explain... you need to set its scroll left position.

DEMO PLUNKR

Solution 2:

You are looking for scrollLeft not marginLeft:

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

 $('#left-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

Demo: http://plnkr.co/edit/ZdCw7IEYdV5YVeGg33oX?p=preview

Solution 3:

The answer of @Vennik is truely awesome, But in my case i used it bit differently, As i used Material Design and was making API call to display Image Carousal , I did in this way , First part is Carousel or Slider code and Second part is JS code

<!-- Carousel --><spanstyle="cursor:pointer"id="left-button"><iclass="material-icons">keyboard_arrow_left</i></span>&nbsp

        <spanstyle="cursor:pointer"id="right-button"><iclass="material-icons">keyboard_arrow_right</i></span><divclass="bill-screens mdl-shadow--4dp"id="offer-pg-cont"><?phpfor($t=0; $t< count($arr_get_a_user['categories']);$t++){?><divclass="bill-pic bill-screen"><buttonclass="bill_class"id="bill_<?phpecho$t?>"onClick="display_image()"><imgclass="bill-screen-image"src="<?phpecho$btn_img1; ?>"></button></div><?php }?></div>

. . . . . . . . .  .

<scriptdata-require="jquery"data-semver="2.1.1"src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript">// Carausol JS 

   $('#right-button').click(function() {
      event.preventDefault();
      $('#offer-pg-cont').animate({
        scrollLeft: "+=200px"
      }, "slow");
   });

     $('#left-button').click(function() {
      event.preventDefault();
      $('#offer-pg-cont').animate({
        scrollLeft: "-=200px"
      }, "slow");
   });
    </script>