Horizontal scrolling div using buttons

Question

How can I set left and right buttons on a DIV to scroll the content horizontally? I don't need to display a scrollbar.

HMTL:

<div id="browser">
  <a href="#" id="left-button"><img src="left-button.jpg" /></a>
  <img src="thumb_1.jpg" />
  <img src="thumb_2.jpg" />
  <img src="thumb_3.jpg" /> 
  <img src="thumb_4.jpg" />
  <img src="thumb_5.jpg" />
  <img src="thumb_6.jpg" />
  <a href="#" id="right-button"><img src="right-button.jpg" /></a>
</div>

CSS:

#browser { float: left; width: 200px; overflow: hidden; white-space: nowrap; }

score 19 · Accepted Answer · edited Jun 30 '13 at 22:12

19

Do:

<div id="browser">
  <a href="#" id="left-button"><img src="left-button.jpg" /></a>
  <div id="content">
      <img src="thumb_1.jpg" />
      <img src="thumb_2.jpg" />
      <img src="thumb_3.jpg" /> 
      <img src="thumb_4.jpg" />
      <img src="thumb_5.jpg" />
      <img src="thumb_6.jpg" />
  </div>
  <a href="#" id="right-button"><img src="right-button.jpg" /></a>
</div>

<script>
   $('#right-button').click(function() {
      event.preventDefault();
      $('#content').animate({
        marginLeft: "-=200px"
      }, "fast");
   });
</script>

Then the same for the left button, except - marginLeft: +="200px".

edited Jun 30 '13 at 22:12

Community

1
1

answered Dec 19 '11 at 12:39

Patches

1,115
1
10
13

@GSTAR Looking for something similar. How did you get all your images to stay in a horizontal row? Mine wrap to the next line. – Rob Nov 02 '12 at 15:19
`white-space: nowrap` – Si8 Jun 10 '16 at 18:10

score 2 · Answer 2 · edited May 23 '17 at 10:31

Here is the code that you want. It's proved that works on IE, Safari, Chrome, Firefox, etc.

Here is the HTML part.

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

Here is jQuery part in JavaScript function.

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }
       }

For hiding the arrows please looking here. Detect end of horizontal scrolling div with jQuery

First I used the code from approved answer but in my case, changing margin worked really weird... Thanks for this scrollLeft! — Rohail Abbas, Sep 29 '18 at 12:45

score -1 · Answer 3 · answered Dec 19 '11 at 12:47

you can try this: - make a "mask div" and set the position relative, set the width, and overflow hidden. - make a content div inside the mask div and set position fix

Now you can put two button: left and right, and you need to modifiy only the content div's left value

Horizontal scrolling div using buttons

3 Answers3

Linked