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 -->
        <span style="cursor:pointer" id="left-button"><i class="material-icons">keyboard_arrow_left</i></span>&nbsp

        <span style="cursor:pointer" id="right-button"> <i class="material-icons">keyboard_arrow_right</i></span>

    <div class="bill-screens mdl-shadow--4dp" id="offer-pg-cont">

           <?php for($t=0; $t< count($arr_get_a_user['categories']);$t++){?>
            <div class="bill-pic bill-screen">
              <button class="bill_class" id="bill_<?php echo $t ?>"  onClick="display_image()">

                <img class="bill-screen-image" src="<?php echo $btn_img1; ?>">
             </button>

            </div>
           <?php }?>

        </div>

. . . . . . . . .  .

<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="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>