Question

所以我正在研究这个100％宽的jQuery Image滑块（带有carouFredSel）并显示上一张和下一张图像。我从这个网站得到了一个很好的例子：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;
}

带有Div的jQuery图像滑块

1 个答案: