[feature] Center the first 'page' instead of left align

[davidkslack]

Hi Richard,

Just looking at some carousels for a project I'm working on and after trying some I've found yours seems to be closest to what I'm looking for.

What I'm missing is (after loop and continuous is enabled) a way to get the first 'page' to the center.

So, the center is the first 'page', the right is the second and the left is the last.

Any easy way to do this? Cheers Dave.

[davidkslack]

Spent an hour on this today as my deadline is getting close. For my needs I got this working but I think you will need a bool in the options and a function to use it.

Ok, in the _slide function in the else for the translate3d we have the pos var that controls the position of the next element. If we find the width of the window, minus the width of the item we are on then divide by 2 we get the space to move the pos to make the item centered. We then just take that from pos.

I'm using Twitter bootstrap and had to add another 30 to get it right.

So, just above the animateProps line add:

            // Get the width of the screen, take off the width of the page then divide by 2
            // We need to add 30 for bootstrap
            var windowWidth = $( window ).width();
            var lastItem = this.elements.items.eq(this.getNoOfItems() - 1);
            var lastItemWidth = lastItem.width();
            pos = pos - (( windowWidth - lastItemWidth) / 2) + 30;

If you can add this in correctly (not like my hack) and add a bool option to center the first item that should work.