CODEWITHSUNDEEP
jqueryjquery-pluginscaroufredsel
test
test

Reputation: 2466

jQuery carouFredSel li width

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:

enter image description here

I tried it like this:

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

But the animation is not going so smooth.

How can I fix this?

Upvotes: 0

Views: 6370

Answers (1)

Tim Hobbs
Tim Hobbs

Reputation: 2017

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.

Upvotes: 3

Related Questions