carouFredSel li width

http://stackoverflow.com/questions/10988741/jquery-caroufredsel-li-width

by jesus_tesh

HTML

<script src="http://caroufredsel.frebsite.nl/js/jquery/jquery.carouFredSel-5.5.5-packed.js"></script>
<div class="list_carousel">
    <ul id="foo4">
        <li style=" background: #CFC;">c</li>
        <li style=" background: #CF9;">a</li>
        <li style=" background: #CF6;">r</li>
        <li style=" background: #6FF;">o</li>
        <li style=" background: #39C;">u</li>
        <li style=" background: #9C6;">F</li>
        <li style=" background: #996;">r</li>
        <li style=" background: #CFC;">e</li>
        <li style=" background: #CF9;">d</li>
        <li style=" background: #CF6;">S</li>
        <li style=" background: #39C;">e</li>
        <li style=" background: #9C6;">l</li>
        <li style=" background: #9C6;"> </li>
    </ul>
    <div class="clearfix"></div>
    <a id="prev2" class="prev" href="#">&lt;</a>
    <a id="next2" class="next" href="#">&gt;</a>
    <div id="pager2" class="pager"></div>
</div>

CSS

.list_carousel {
    background-color: #ccc;
    margin: 0 0 30px 60px;
    width: 360px;
}
.list_carousel li { 
    float: left;
    width: 300px;
    height: 100px;
}
.clearfix {
    float: none;
    clear: both;
}
.prev {
    float: left;
    margin-left: 10px;
}
.next {
    float: right;
    margin-right: 10px;
}
.pager {
    float: left;
    width: 300px;
    text-align: center;
}
.pager a {
    margin: 0 5px;
    text-decoration: none;
}
.pager a.selected {
    text-decoration: underline;
}
.timer {
    background-color: #999;
    height: 6px;
    width: 0px;
}

JavaScript

$(function() {
    //    Fluid layout example 1, resizing the items
    $('#foo4').carouFredSel({
        responsive: false,
        width: 360,
        scroll: 1,
        auto: false,
        prev: '#prev2',
        next: '#next2',
        pagination: "#pager2",
        items: {
            visible: {
                min: 3,
                max: 3
            }
        }
    });
});