Question

Hi i use some piece of code for prototype slider but the code is not working.My first image excute first time for total no’s than other images start sliding.If there are 3 images than first image slide for 3 time and than the slider start working.
This is my code :

var i = 0;
var j=0;
var time = '';
var delay ='';
var item_id ='';



var child;
var image_slide = [];
var NumOfImages;    
var wait = 2000;        
      var container = document.getElementById("image-container");

    for (child = container.firstChild; child; child = child.nextSibling) {
        if (child.id && child.nodeName === "DIV") {
        image_slide.push(child.id);
        }
    }

    var NumOfImages = image_slide.length;

function SwapImage(x,y) {
    console.log(x);
    $(image_slide[x]).appear({ duration: 1.5 });
    $(image_slide[y]).fade({duration: 1.5});
}


function StartSlideShow() {
    play = setInterval('Play()',wait);


}

function Play() {
    var imageShow, imageHide;

    imageShow = i+1;
    imageHide = i;

    if (imageShow == NumOfImages) {
        SwapImage(0,imageHide); 
        i = 0;                  
    } else {
        SwapImage(i+1,imageHide);           
        i++;
    }
}

function Stop () {
    clearInterval(play);                

}.

This is my html

<div id="image-container"  class="protoshow"  onmouseover="javascript:StartSlideShow();" onmouseout="javascript:Stop();">

                <div class="fade-box" id="image-1"><img src="slide01.jpg" alt="" /></div>
                <div class="fade-box" id="image-2"><img src="slide01.jpg"  alt="" /></div>
                <div class="fade-box" id="image-3"><img src="slide01.jpg"  alt="" /></div>
                <div class="fade-box" id="image-4"><img  ssrc="slide01.jpg"  alt="" /></div>

        </div>

I try my best but don’t find why it happen.thanks in advance

Answer 1

After debugging each line i find that on first loop it hide all lower elements with display:none property of css.After adding dispaly:none to every element other than first ,it will automatically change elements on first loop.So when working with custom slider other elements must be displayed none for slider effect except first one.
Thanks