Carousel Animation buggy

Question

I am using CarouFredSel.js to make a carousel that scrolls through one item at a time. As of right now when next or previous are clicked it will scroll out of screen but then the new one will just appear, I want it to slide in.

Here's the code

jQuery(function () {
    jQuery('#foo2').carouFredSel({
        prev: '#prev2',
        next: '#next2',
        auto: false,
        circular: true,
        infinite: true,
        responsive: true,
        direction: "left",
        width: null, // automatically calculated
        height: null, // automatically calculated
        align: "center",
        items: {
            visible: 1,
            start: "random"
        }
    });
});

Also here's it in a fiddle jsfiddle.net/TCAb3/

Answer 1

Here is the solution, I need to correct the js and css:

Demo

JS

jQuery(function () {
    jQuery('#foo2').carouFredSel({
        prev: '#prev2',
        next: '#next2',
        auto: false,
        circular: true,
        infinite: true,
        responsive: true,
        direction: "left",
        width: null, // automatically calculated
        height: null, // automatically calculated
        align: "center",
        items: {
            visible: 1,
            start: "random"
        }
    });
});

CSS

#foo2 li {float: left;}