Caroufredsel > Center Current Item to certain margin while carousel container width is 100%

Question

I'm trying to position the current middle item in the carousel in the middle of the 100% width. Here's an example image http://ww.prompt-dev.com/example.png, found it hard to explain with plain words...

Carousel width is 100%. Items visible are 3. Items width is variable. Scroll 1 item at a time.

Here's the Caroufredsel setup that I'm using so far:

$('#carousel').carouFredSel({
    width: "100%",
    items: { visible: 3, minimum: 2, start: -1, width: 'variable' },
    scroll: { items: 1, pauseOnHover: true, duration: 1000, timeoutDuration: 3000
        ,onBefore: function(){
            $('ul#carousel li')
                .animate({opacity:0.5}, 250);
        },
        onAfter: function(){
            $('ul#carousel li')
                .filter(':eq(1)')
                .animate({opacity:1}, 250);
        }
    },
    auto: { play: false },
    prev: { button: "#prev", key: "left" },
    next: { button: "#next", key: "right" },
    swipe: true
});

And this is the CSS:

#carousel_wrap {
    height: 700px;
    left: 0;
    margin: 30px 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

ul#carousel li {
    display: block;
    float: left;
    height: 700px;
    margin: 0 7.5px;
    position: relative;
}

Any help would be very much appreciated!

Answer 1

This is the best I can.

1 - Added align center and responsive true to js

$('#carousel').carouFredSel({
    width: "100%",
    align: 'center',
    responsive  : true,
    items: { visible: 3, minimum: 2, start: -1},
    scroll: { items: 1, pauseOnHover: true, duration: 1000, timeoutDuration: 3000
        ,onBefore: function(){
            $('ul#carousel li')
                .animate({opacity:0.5}, 250);
        },
        onAfter: function(){
            $('ul#carousel li')
                .filter(':eq(1)')
                .animate({opacity:1}, 250);
        }
    },
    auto: { play: true },
    prev: { button: "#prev", key: "left" },
    next: { button: "#next", key: "right" },
    swipe: true
}); 

2 - Added on line 150 and 151 of css - Text align center and overflow hidden

ul#carousel li {
    display: block;
    float: left;
    height: 700px;
    margin: 0 7.5px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

Here is the demo link: http://jsfiddle.net/ignaciocorreia/sBT9M/