CSS Style Issue with Content Slider Pointer

I am trying to modify a JQuery Content Slider that Im currently usi开发者_如何学编程ng to have the Thumb pics appear at the bottom instead of appearing at the side:

Here is the current Content Slider that has the Thumb Pics on the side: http://jsfiddle.net/NinjaSk8ter/6WXkM/

This is my implementation where I have moved the Thumb Pics at the bottom: http://jsfiddle.net/NinjaSk8ter/QaLg2/

As you can see the problem is that my Arrow Pointer has dissappeared. Does anyone know why is this occurring?

The reason why it's not working the way you wanted it to be, is simply because the first image of the bottom bar is placed in a separate parent element, while the rest of the images in the bottom bar is placed under an second parent element.

I have made some changes to your file. Try checking it out here again: http://jsfiddle.net/teddyrised/5tXgQ/3/

On a side note, I don't recommend wrapping the <a> in an unnecessary <div> element. They could be floated without the help of a wrapper <div>.

Maybe you modify its style="border-color: black; border-style: solid; border-width: 1px;"