Right and Left Scrolling with Button

Question

I have three divs: left, midle and right. Middle is for the contents, while the left div and the rightdiv is used only for a button that will scroll the middle div. The content of the middle div is going to be lists of pictures. So, if the user want to see the pictures that is still hidden in the right side of the middle div, they can click the right div to scroll it to the the right.

I hope my question can be understood.

This script is not working for my divs. I think anyone here can give me another script that can control those divs.

Here is only the script that I cannot use

   $(document).ready(function () {
       $("#left").click(function () { 
       var leftPos = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos + 250}, 600);
  });   

       $("#right").click(function () { 
       var leftPos2 = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 600);
  });   
       });   

FIDDLE:

Scroll Left to Right with Button

Thanks in Advance

Answer 1

You could just float and fix your right colomn to the right side with absolute layout.

And let the browser scroll right to left natively. Just margin pad the outer content to the same width as the right column div the same width as the right div. That way when they scroll all the way to the right the right div isn't hiding the remaining content.

Answer 2

It looks like your script is accurate. I think the problem you're running into is two-fold:

1. You must have a width set on the container div
2. Your content in the middle div must exceed the current width of the div, otherwise jQuery won't scroll it

Here's a DEMO

.DivDataMain {
    width:100%;
    overflow:hidden;
    display:block; 
    background:#000; 
    height:400px; 
    margin:auto;
    position: relative;
}

Answer 3

正如约翰所说，脚本很好。您可以考虑在整张幻灯片中使用slide，而不是使div动画250px……这会限制以后对图片的选择……尝试一下https://github.com/eamonnkillian/滑入式框架