Start jQuery Carousel On 2nd Frame

Question

I have this jQuery carousel going: http://dougie.thewestharbour.com/wp-content/themes/dougie/slider.html

It works pretty well right now but there are 2 things I am trying to fix in the css and jQuery:

http://dougie.thewestharbour.com/wp-content/themes/dougie/carousel/css.css http://dougie.thewestharbour.com/wp-content/themes/dougie/carousel/js.js

How would I get it to start with the 2nd frame in the center of the screen, with the 1st still on the left and 3rd still on the right? It must be in the center so that the 1st and 3rd are evenly spaced on either side.

I've attached an image of what it should look like on a 1280 wide screen. Then on a larger screen size, you would just see more of the left and right images and everything would still be centered.

Also, you can see it adds the next loop when it moves from 1 to 2. How would I get it so it adds it when it moves from the end back to 1 so that you don't actually see it add?

Thanks, Wade

Answer 1

Looking at the carousel plugin I don't think it's possible to have a start index. I did however find one that does: jCarousel

It is a simple change to your code, add an id to the ul and the following js

$(document).ready(function() {
    $('#mycarousel').jcarousel({
        start: 2,
        auto: 2,
        scroll: 1,
        wrap: "circular"
    });
});

I haven't been able to find a reliable way to center the active li. But I'm sure there is a way.

EDIT: Can now do it...

All you need to do is set the viewport width to the width of the li, ie 750px. Then add margin:0 auto; to the viewport css. Oh and set overflow to visible.

DEMO