Question

我正在为我的旋转木马使用jQuery CarouFredSel插件，我正试图将它集中在一起。我试图将margin:0 auto;应用于头部轮播标记#c-carousel，但没有任何反应。我想这可能是因为我没有指定宽度，但是当我指定旋转木马的宽度部分时会被切断。

我正在尝试使用我的旋转木马类似于位于Blizzard's homepage上的旋转木马，其中旋转木马将通过一系列带链接的图像旋转，但不会导致水平滚动条出现，如果浏览器比旋转木马内容更窄。

代码：

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

Answer 1

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

将＃c-carousel添加到该属性：

width:960px;

并删除最小宽度。这将使保证金有效。

添加此CSS：

body {overflow-x:hidden}

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

中心这个CarouFredSel旋转木马

1 个答案: