Center CarouFredSel Carousel

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-旋转木马的特性：

width:960px; 

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

添加此CSS：

body {overflow-x:hidden} 

这将使页面忽略如果上x轴的含量较大，则视口和将不显示水平滚动条。