CODEWITHSUNDEEP
javascriptjquery
user520300
user520300

Reputation: 1527

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 find vertically scrolling a div up and down but now left and right?

Upvotes: 1

Views: 57944

Answers (1)

Sean Adkinson
Sean Adkinson

Reputation: 8605

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 html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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>

Upvotes: 9

Related Questions