Question

I was wondering how we would be able to find the current location of the element in the browser. I am trying to create a jQuery slider. Have created sliders by animating margins earlier. But this case is bit complicated. It has two navigations. one that will slide from one page to other. One page has four thumbnails. And using the bottom navigation you can slide through only one thumbnail. Please refer to the image below.

I have been able to get this effect earlier by animating the margins. But it isn’t very efficient and has a lot of bugs. So I thought I would rather do it from scratch again.

Now what I am planning to do is:

1. With the arrow navigation, animate the margin and go to next slide.
2. with the pagination, find out the current location of the thumbnail and animate margin equal to the width of article + gutter.

Is it possible to do it using jQuery offset? Please suggest me the right way. Any examples of sample code will be highly appreciated.

Thanks in advance.

EDIT:

I have actually finished the slider. It is working perfectly as I wanted. I will answer to this question in few days. Also when the site is completed I will share the link so others can see it in action. 🙂

Answer 1

I just created a variable called margin that keeps track of the current margin. When arrow navigation is pressed increase or decrease margin by margin * 4. If bottom navigation is pressed get the int from a variable that returns which pager was cliceked. If the fourth one is click. just multiply 4 * default margin.

If anyone is interested I can share the code sample.