1

我正在为我的轮播使用 jQuery CarouFredSel 插件，我正在尝试将其居中。我试图申请margin:0 auto;头部轮播标签#c-carousel，但什么也没发生。我认为这可能是因为我没有指定宽度，但是当我指定宽度时，轮播的一部分会被切断。

我试图用我的轮播做的类似于位于暴雪主页上的轮播，轮播将在一堆带有链接的图像中旋转，但如果浏览器比轮播更窄，则不会导致水平滚动条出现内容。

代码：

<div id="c-carousel">
    <div id="wrapper">
        <div class="caroufredsel_wrapper">
            <div id="carousel">
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/ff0000/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/00ff00/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/0000ff/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/f0f0ff/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
            </div>
        </div>
    </div>
    <div id="pager">
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class="selected"><span>1</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>2</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>3</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>4</span></a>
    </div>
</div>
<div id="content">
    content
</div>

$(function() {
    $('#carousel').carouFredSel({
        scroll: {
            fx: 'crossfade',
            duration: 1000
        },
        pagination: {
            container: '#pager',
            duration: 500
        }
    });
});


#c-carousel {
    height: 100%;
    padding: 0;
    margin: 0 auto;
    min-height: 600px;
    min-width: 960px;
    text-align: center;
}
#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.caroufredsel_wrapper {
    width: 100% !important;
    height: 100% !important;
}
#carousel .slide {
    width:1200px;
    height:650px;
    overflow: hidden;
    float: left;
    padding-right: 10000px;
}
#carousel .slide .content {
    font-size: 55pt;
    position: relative;
    top: -300px;
    left: 100px;
    z-index: 5;
}
#carousel .slide img {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

#pager {
    position: relative;
    top: -250px;
    z-index: 10;
    display: block;
}
#pager a {
    background-color: #356;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
    background-color: #134;
}
#pager a span {
    display: none;
}

#content {
    background: yellow;
    width: 960px;
    height: 500px;
    position: relative;
    margin: 0 auto;
    z-index: 20px;
    top: -200px;
    font-size: 80pt;
}
4

1 回答 1

2

检查您在此处调整的代码：http: //jsfiddle.net/7Esrm/

将属性添加到#c-carousel：

width:960px;

并删除最小宽度。这将使保证金工作。

添加这个CSS：

body {overflow-x:hidden}

如果 x 轴上的内容大于视口，这将使页面忽略，并且不会显示水平滚动条。

于 2012-09-20T21:16:05.277 回答