Home/ Questions/Q 720253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T05:44:14+00:00

I am trying to create sliding images effect: Online demo link text . The

  • 0

I am trying to create sliding images effect:
Online demolink text.

The problem is when you click rapidly and randomly on the buttons and not wait for animation to finish causing unpredicted results and even stopping the functionality to work. (and once it stopped in the middle of 2 images…)

How Can I make it work without bugs?
I know that there are some other tools for that sliding like jquery and other approaches like changing the position attribute and not the scrollLeft attribute.
But I want to do it as it is, with scrollLeft, if it possible of course.

The Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            body
            {
                padding:0px;
                margin:0px;
            }
            #imageContainer
            { 
                width: 500px;
                position: relative;             
            }
            #div
             {              
                overflow: hidden;
                white-space: nowrap;                            
            }

            #div img {
                cursor: pointer;
                vertical-align: bottom;
                width: 500px;
                padding:0px;
                margin:0px;
                display:inline;
            }


        </style>
        <script type="text/javascript">                        
            var scrollIntervalID;
            var currentIndex=0;                                

            function Scroll(ind){

                var dir = ind ==currentIndex?0:ind<currentIndex?-1:1;
                var steps = Math.abs(ind-currentIndex);

                scrollIntervalID = setInterval(function(){
                    var i=(steps*10)-1;
                    return function(){
                        if (i <= 0) 
                            clearInterval(scrollIntervalID);
                        var elm = document.getElementById("div");                   
                        elm.scrollLeft +=dir * 50;
                        i--;   

                        document.getElementById("span").innerHTML=elm.scrollLeft;

                    }
                }(), 15);
                currentIndex=ind;
            }            

        </script>
    </head>
    <body>
        <div id="imageContainer">
            <div id="div">
                <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/>
            </div>          
        </div>

        <div>
            <input type="button" value="1" onclick="Scroll(0);"/>
            <input type="button" value="2" onclick="Scroll(1);"/>
            <input type="button" value="3" onclick="Scroll(2);"/>
            <input type="button" value="4" onclick="Scroll(3);"/>
        </div>
        <span id="span"></span>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would sriously recommend you to use frameworks like jQuery but if you insist to work on the current version, you have to take care of scenarios which happens during the animation.

    You have scrollIntervalID, but it is not used outside the scope of the function. You can try clearing the interval timer by using clearInterval when a previous sliding animation is in progress and advance the position to the intended one before performing the next animation.

    • 0