title: Image FadeIn FadeOut Working but when I use buttons to Naviagte between images it flickers
body: <p>Im working on a site where I created a small slide show of images. The images fadeIn and fadeOut  okay along with their captions, but sometimes when it reaches the last image it goes full blank white before showing first image again. Also i added two buttons at bottom to navigate the images and they work as well but when I sometimes use them the images flicker in between transitions and the slide show speeds up and it just gets confusing. Please let me know what to change in my JS code.</p>
  
  <pre><code>    var imageDisplayer=0;
  
  
  //*******IMAGE CAPTION FOR SLIDE SHOW
  
  var imageCaption=[
      "Test for image 1..",
       "Test for image 2.",
        "Test for image 3."
  ];
  
  
  
  function slideShow(){
  var imagePointer=document.getElementsByClassName("indexSlideShow");
  var captionPointer=document.getElementById("imageCaption");
  for(var i=0;i&lt;imagePointer.length;i++ )
  {
      fadeOut( imagePointer[imageDisplayer]);
  }
  imageDisplayer++;
      if (imageDisplayer &gt;= imagePointer.length)
      {
          imageDisplayer = 0;
      }    
  
      fadeIn( imagePointer[imageDisplayer]);
      captionPointer.innerHTML=imageCaption[imageDisplayer];
      setTimeout(slideShow, 9000);
  }
  slideShow();
  function buttonSlideShowPrevious(){
      var imagePointer=document.getElementsByClassName("indexSlideShow");
  var captionPointer=document.getElementById("imageCaption");
      fadeOut( imagePointer[imageDisplayer]);
      imageDisplayer=imageDisplayer-1;
  
   fadeIn( imagePointer[imageDisplayer]);
      captionPointer.innerHTML=imageCaption[imageDisplayer];
      // setTimeout(slideShow, 9000);
  }
  function buttonSlideShowNext(){
       var imagePointer=document.getElementsByClassName("indexSlideShow");
  var captionPointer=document.getElementById("imageCaption");
      fadeOut( imagePointer[imageDisplayer]);
      imageDisplayer=imageDisplayer+1;
  
   fadeIn( imagePointer[imageDisplayer]);
   captionPointer.innerHTML=imageCaption[imageDisplayer];
     // setTimeout(slideShow, 9000); 
  }
  
  function fadeOut(element) {
  
     var op = 1;  // initial opacity
      var timer = setInterval(function () {
          if (op &lt;= 0.1){
              clearInterval(timer);
              element.style.display = 'none';
          }
          element.style.opacity = op;
         // element.style.filter = 'alpha(opacity=' + op * 100 + ")";
          op -= op * 0.025;
      }, 10);
  }
  
  function fadeIn(element) {
      var op = 0.1;  // initial opacity
     element.style.display = 'block';
      var timer = setInterval(function () {
          if (op &gt;= 1){
              clearInterval(timer);
          }
          element.style.opacity = op;
        //  element.style.filter = 'alpha(opacity=' + op * 100 + ")";
          op += op * 0.025;
      }, 10);
  }
  </code></pre>