Question

I have a testimonial box that has the testimonial within it, and then I have icons indicating whom provided the testimonial underneath. Connected to the box and right above the icon is a little arrow that can be generated via CSS or an image.

Every 5 seconds, it should change the testimonial content via a fade-in/fade-out, the little image should slide to the right, and the icon should fade to a colored version of the icon. At the end of the loop (when it reaches the 5th one), the arrow should slide all the way to the left and the loop should begin again.

I’m not too familiar with how I can do this with a loop efficiently, or how to time it. I know the basics of how I can fade it in and whatnot, but I’m lost on the rest.

Thank you very much!

Answer 1

setInterval is what you’re looking for.

var counter = 0;
var repeat = setInterval(myFunc, 5000);

function myFunc()
{
    //increment counter
    counter++;

    if (counter == 5)
    {
        //reset counter
        counter = 0;
        //time to slide all the way to the left
    }
    else
    {
        slide one image to the right
    }
}