Question

I am trying to built a timer for my Image Slider as it is in this site
https://store.sap.com/sap/cpa/repository/store/sapstore/US/default.html

This is the one which I tried of my own.
Image with text is sliding good, but there is issue in my timer.
But there are some issues due to that I commented that code in my tried link:

http://codebins.com/bin/4ldqp9c/24

Here I created a thumbnails but the issue is binding the image and its text with this timer.

Answer 1

I’ve generated li based on images length:

for(var i = 0; i< maximages; i++){   
    var th = '<li><a href="#'+i+'"></a></li>';
    $(th).appendTo('#thumbs > ul');
}

and add a click function on li (is not perfect but it’s an idea to do):

$('.paging >li a').on('click', function(e){
    e.preventDefault();
    //console.log(e.target.href);
    var slide = e.target.href.split('#')[1];
    console.log(slide);
    prevIndex = slide; //set next slide to index clicked
});

an animate the thumbs:

$('.paging > li').eq(prevIndex-1).css('background-color', '#777777');
$('.paging > li').eq(prevIndex).css('background-color', '#FF0');

More effect should be done with Jquery UI.

EXAMPLE

I’m sorry, but now i’ve no much time to test it, but hope this help.