Javascript 带Divs的jQuery图像滑块

因此，我正在开发这个jQuery图像滑块（w/carouFredSel），它将100%宽，并显示上一个和下一个图像。我从这个网站得到了一个很好的例子：。但是，当我将img标记更改为divs时，它不起作用。我不知道为什么没有

这是我正在使用的代码：

#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
        }
    });
});

#包装器{
背景色：#fff；
宽度：100%；
高度：450px；
页边顶部：-225px；
溢出：隐藏；
位置：绝对位置；
最高：50%；
左：0；
}
#旋转木马{
显示：块；
浮动：左；
}
#上一个#下一个{
背景色：rgba（255、255、255、0.7）；
显示：块；
高度：450px；
宽度：50%；
排名：0；
位置：绝对位置；
}
#上一个：悬停，#下一个：悬停{
背景色：#fff；
背景色：rgba（255、255、255、0.8）；
}
#上{
左：-495px；
}
#下一个{
右：-495px；
}
#传呼机{
左边距：-470px；
位置：绝对位置；
左：50%；
底部：10px；
}
#寻呼机a{
边框：2倍实心#fff；
边界半径：10px；
显示：内联块；
宽度：10px；
高度：10px；
边距：0 5px 0 0；
}
#寻呼机a：悬停{
背景色：rgba（255、255、255、0.5）；
}
#传呼机跨距{
显示：无；
}
#寻呼机a已选定{
背景色：#fff；
}
$（函数（）{
$（'旋转木马'）。旋转木马({
宽度：“100%”，
项目：{
可见：3，
开始：-1
},
滚动：{
项目：1，
持续时间：1000，
超时持续时间：3000
},
上一页：“#上一页”，
下一个：“#下一个”，
分页：{
容器：“#寻呼机”，
偏差：1
}
});
});

现在我确定了。这一个成功了

---

如果当您将

img

标记更改为

div

标记时插件中断，则很可能是因为插件正在查找

img

标记。。。如果它找不到，那么它就不能做，它是做什么的。@SverriM.Olsen，它的格式不正确，就是不工作。。。。我也这么想，但后来我阅读了文档，所以我不知道哪里出了问题。通过类似JSFIDLE的方式提供示例是获得帮助的更有效的方法。

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