Question

I’m using this plugin and here is the code: http://jsfiddle.net/gm8t5/

Basically I want to increase the middle li width to look something like this:

I tried it like this:

.list_carousel li {width: 960px !important;}

But the animation is not going so smooth.

How can I fix this?

Answer 1

Set the item width in the CSS using .list_carousel li. Also, you need to set the items visible to 3 since you want 1 off to each side with 1 in the middle.

Plugin setting:

items: {
    visible: {
        min: 3,
        max: 3
    }
}

CSS

.list_carousel li { 
    float: left;
    width: 300px;
    height: 60px;
}

You can play with resizing the items, as well as resizing the container. You’ll want the item width to be most of the overall container width the achieve the effect you are looking for.

I made a new jsfiddle and did some serious clean up. The markup and CSS you had was actually making it impossible to achieve what you were looking for.