帶有Divs的jQuery圖像滑塊

Question

所以我正在使用這個jQuery圖像滑塊（w / carouFredSel），該滑塊的寬度為100％，並且也顯示上一個和下一個圖像。 我從該站點獲得了一個很好的例子： http : //coolcarousels.frebsite.nl/c/2/ 。 但是，當我將img標簽更改為div時，它不起作用。 我不確定為什么不這樣做。

這是我正在使用的代碼：

#wrapper {
    background-color: #fff;
    width: 100%;
    height: 450px;
    margin-top: -225px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0;
}
#carousel img {
    display: block;
    float: left;
}
#prev, #next {
    background-color: rgba(255, 255, 255, 0.7);
    display: block;
    height: 450px;
    width: 50%;
    top: 0;
    position: absolute;
}
#prev:hover, #next:hover {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
}
#prev {
    left: -495px;
}
#next {
    right: -495px;
}
#pager {
    margin-left: -470px;
    position: absolute;
    left: 50%;
    bottom: 10px;
}
#pager a {
    border: 2px solid #fff;
    border-radius: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
}
#pager a:hover {
    background-color: rgba(255, 255, 255, 0.5);
}
#pager a span {
    display: none;
}
#pager a.selected {
    background-color: #fff;
}

<div id="wrapper">
    <div id="carousel">
        <div style="width: 990px; height: 450px; background-color: #F00;"></div>
        <div style="width: 990px; height: 450px; background-color: #F00;"></div>
        <div style="width: 990px; height: 450px; background-color: #F00;"></div>
        <div style="width: 990px; height: 450px; background-color: #F00;"></div>
        <div style="width: 990px; height: 450px; background-color: #F00;"></div>
    </div>
    <a href="#" id="prev" title="Show previous"> </a>
    <a href="#" id="next" title="Show next"> </a>
    <div id="pager"></div>
</div>

$(function() {
    $('#carousel').carouFredSel({
        width: '100%',
        items: {
            visible: 3,
            start: -1
        },
        scroll: {
            items: 1,
            duration: 1000,
            timeoutDuration: 3000
        },
        prev: '#prev',
        next: '#next',
        pagination: {
            container: '#pager',
            deviation: 1
        }
    });
});

Answer 1

現在我確定，這個工作了！ http://jsfiddle.net/vvdp39vk/4/

#carousel div{
display: block;
float: left;
}