Geek Answers Handbook

Jquery horizontal scroll with buttons

I am trying to get horizontal scroll using buttons.

I have a container that has several divs arranged horizontally, and I want to scroll through them using the specified buttons.

Please take a look at my attemp and tell me what I'm 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 tried the solutions I found on the Internet. But my container continues to change, although I'm trying to fix it.

+4
source share
3 answers
$('#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 it to scroll left.

Demo plunkr

+7
source

You are scrollLeftnot looking for marginLeft:

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

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

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

+5

@Vennik's answer is really awesome,
But in my case I used its bit differently, since I used Material Design and made an API call to display Image Carousal,
I did so,
The first part is the carousel or slider code, and the second part is the code Js

<!-- 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>
0
source

More articles:


All Articles