Question

I want to add two picture slider at same page by JavaScript only. But only one slider is working and another is static.

Here is my code so far what I got from a website.

<script type="text/javascript">    
    window.onload = function() {
        var rotator = document.getElementById("rotator");
        var images = rotator.getElementsByTagName("img");
        for (var i = 1; i < images.length; i++) {
            images[i].style.display = "none";
        }
        var counter = 1;
        setInterval(function() {
            for (var i = 0; i < images.length; i++) {
                images[i].style.display = "none";
            }
            images[counter].style.display = "block";
            counter++;
            if (counter == images.length) {
                counter = 0;
            }
        }, 3000);
    };​
</script>  

<div id="rotator">
    <img height="250px" width="200px" src="images/claim/1.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/2.jpg" alt="" />
    <img height="250px" width="200px" src="images/claim/3.jpg" alt="" />
</div>

Answer 1

Its because your code is applying the slide function only on one div.
Create another div with id = ‘rotator2’, then the following code will trigger slide on both.

<script type="text/javascript">
        window.onload = function() {  slideIt("rotator");slideIt("rotator2") ; } ;  
        function slideIt(contId) {
            var rotator = document.getElementById(contId);
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };

</script>