jquery - 将这个CarouFredSel旋转木马居中

我正在为我的轮播使用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;
}

最佳答案

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

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

width:960px;

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

添加此CSS：

body {overflow-x:hidden}

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

关于jquery - 将这个CarouFredSel旋转木马居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12520535/