Scrolling A Div Of Images Horizontally With Controls
I have a div with a bunch of images in it. With arrow controls to the left and right. I want my div to scroll right and left through the images with the arrow controls. I can fin
Solution 1:
You can scroll left and right when clicking on your arrows by editing the scrollLeft DOM property of the scrolling element.
Using jQuery, you can use the .scrollLeft() function to get or set the scrollLeft property - link to docs
Here is a really simple page I just cooked up that shows the behavior:
<!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><scripttype="text/javascript">functionscrollDiv(dir, px) {
var scroller = document.getElementById('scroller');
if (dir == 'l') {
scroller.scrollLeft -= px;
}
elseif (dir == 'r') {
scroller.scrollLeft += px;
}
}
</script><styletype="text/css">#scroller {
width: 400px;
height: 400px;
border: 1px solid blue;
overflow: scroll;
margin: 0 auto;
}
#inner-scroller {
width: 800px;
height: 800px;
}
</style></head><bodystyle="text-align: center;"><ahref="javascript: void(0);"onclick="scrollDiv('l', 20); return false;">scroll left</a>
|
<ahref="javascript: void(0);"onclick="scrollDiv('r', 20); return false;"> scroll right</a><divid="scroller"><divid="inner-scroller">
800x800
</div></div></body></html>
Post a Comment for "Scrolling A Div Of Images Horizontally With Controls"