Connecting Two Image Sliders Together

I have two sliders on the same page. They are both essentially the same pictures, just different sizes of each other. Demo site (

How can I make it so that when you click on one image on the bottom, the top slider changes to the picture that was clicked?

Here is a link that might help you.

When you click on a smaller image, do you want the top slider after changing to the larger image, to stop animating to the next picture?

If so, how will the user re-enable the animation at some later date? By mousing off of the thumbnail? By showing a play button that can be pressed? By having it continue the slideshow after a certain period of time?

I’m just looking to have the animation change to the currently selected image. It can continue to rotate every 6 seconds.

When a large image has been shown for 5 seconds and someone clicks a thumbnail, do you want the large image to change to the large version of what was clicked, and then after one more second to move on to the next image? That is what happens when it retains the six second rotation.

Or, do you want the rotation timer to reset when someone clicks the thumbnail, so that every time someone clicks a thumbnail it takes another six seconds before the large image rotates to the next?