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 find vertically scrolling a div up and down but now left and right?
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 find vertically scrolling a div up and down but now left and right?
Share Improve this question edited Feb 13, 2017 at 10:58 mplungjan 178k28 gold badges181 silver badges240 bronze badges asked Mar 24, 2011 at 3:06 user520300user520300 1,5275 gold badges24 silver badges47 bronze badges 1- Check out this jquery plugin called jcarousel sorgalla./jcarousel – Adil Commented Mar 24, 2011 at 3:12
1 Answer
Reset to default 9You 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 html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function scrollDiv(dir, px) {
var scroller = document.getElementById('scroller');
if (dir == 'l') {
scroller.scrollLeft -= px;
}
else if (dir == 'r') {
scroller.scrollLeft += px;
}
}
</script>
<style type="text/css">
#scroller {
width: 400px;
height: 400px;
border: 1px solid blue;
overflow: scroll;
margin: 0 auto;
}
#inner-scroller {
width: 800px;
height: 800px;
}
</style>
</head>
<body style="text-align: center;">
<a href="javascript: void(0);" onclick="scrollDiv('l', 20); return false;">scroll left</a>
|
<a href="javascript: void(0);" onclick="scrollDiv('r', 20); return false;"> scroll right</a>
<div id="scroller">
<div id="inner-scroller">
800x800
</div>
</div>
</body>
</html>