Unwanted space between slides prevent last slide to be seen

Open ramsestom opened this issue 12 years ago • 0 comments

I found a rather annoying bug with SmoothDivScroll. When it starts, it put some unwanted margin between slides (this space dissapear if you scroll a bit). The problem is that, If the scrolling area contains a small amount of images (too small to fill it completelly) the latest image is not displayed. As I am not sure to be really clear, here is the code of a small example to show you the problem: (it is supposed to display 4 images but only 3 are actually displayed because of this unwanted margin between slides that take some of the total space):

<html>
<head>

<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" />

</head>
<body>


    <style type="text/css">



        #makeMeScrollable
        {
            width:100%;
            height: 200px;
            position: relative;
        }

        #makeMeScrollable div.scrollableArea *
        {
        position: relative;
        display: block
        float: left;
        margin: 0;
        padding: 0;
        border: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
        block of code. It's just a nice feature that prevent the images from
        accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    </style>



<div id="makeMeScrollable">
<img src="http://lorempixel.com/200/200/">
<img src="http://lorempixel.com/200/200/">
<img src="http://lorempixel.com/200/200/">
<img src="http://lorempixel.com/200/200/">
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.kinetic.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js"></script>


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

</body>
</html>

So can this be fixed?

Dec 24 '13 19:12 ramsestom