jQuery DivScroll displays pictures on multiple lines instead of one

Question

I am trying to duplicate the following demo, as seen here:

http://www.smoothdivscroll.com/#quickdemo

But even when I copy thes supplied code, no matter the page width/size, I always end up with two rows of pictures. If there are 7 pictures, 6 of them will be in a row, and the 7th will be under that row, on the far left, and cycle through them as I scroll left and right. Here is the code I'm using:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    <title>Page Title</title>
    <link rel="Stylesheet" type="text/css" href="jquery/css/smoothDivScroll.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js">    </script>
    <script type="text/javascript" src="jquery/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="jquery/js/jquery.smoothdivscroll-1.2-min.js">    </script>


<script type="text/javascript">
    $(document).ready(function() {
            $("#makeMeScrollable").smoothDivScroll({ 
                    mousewheelScrolling: true,
                    manualContinuousScrolling: true,
                    visibleHotSpotBackgrounds: "always",
                    autoScrollingMode: "onstart",
            });
    });
</script>

</head>
<body>


<div id="makeMeScrollable">
            <img src="jquery/images/demo/field.jpg" alt="Demo image" id="field" />
            <img src="jquery/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
            <img src="jquery/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
            <img src="jquery/images/demo/golf.jpg" alt="Demo image" id="golf" />
            <img src="jquery/images/demo/river.jpg" alt="Demo image" id="river" />
            <img src="jquery/images/demo/train.jpg" alt="Demo image" id="train" />
            <img src="jquery/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
            <img src="jquery/images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>

</body>
</html>

So the end result should be a single row of scrolling pictures, that starts to autoscroll when the page loads, then stops as soon as there is mouse interaction, and you can use the side arrows to manually scroll left and right.

Visually, this is what I should get/what I want (the <> are the scrolling areas on the side)

< [  ] [  ] [  ] [  ] >

And this is what I'm getting:

< [  ] [  ] [  ] >
  [  ]

Hopefully that makes sense. Any help on this subject would be greatly appreciated. I've all but copied the page itself to see what is different, but I still can't find any big discrepancies when it comes to the jQuery code or HTML.

Edit: Updated with complete page source code.

jQuery DivScroll displays pictures on multiple lines instead of one

0 Answers0