Jquery PHP Image Slider

Question

I'm trying to make an image slider and it's almost complete but everytime I try it. The slider basically goes through the first 3 images and then blank for like 18 spaces, and then it goes back to the original first image and repeat.

I can't understand why this is happening, could you check out my code at jsfiddle thanks.

 $(document).ready(function(){
   $('#slider > img#1').fadeIn(300);

   startSlider();
  $("#slider > img").hover(
  function() {
  stopLoop();
  },
    function() {
  startSlider();
    }
   );
   });

https://jsfiddle.net/v2gjzLoc/ for all of the code

Also here is a live example of what is happening exactly.

: https://i.gyazo.com/6e1fca47c02a49be488f32f040f87beb.gif

Please ignore the image choices, I was just testing out something.

But you can see the problem

Answer 1

I think this line is your problem - you have a concatenator operator in there when you a realyl just tryig to create the variable to echo.

   $imageDisplay .= '<img id="'.$id.'" src="'.$images.'" border="0"/> ';

it should be (the same line without the concatentor)

$imageDisplay = '<img id="'.$id.'" src="'.$images.'" border="0"/> ';

also I can't see a role for "$i" in that code - but you have it incrementing in the foreach loop - is that variable supposed to be used somewhere?