1

カルーセルにjQueryCarouFredSelプラグインを使用していて、それを中央に配置しようとしています。margin:0 auto;ヘッドカルーセルタグに適用しようとしまし#c-carouselたが、何も起こりませんでした。幅を指定しなかったためかもしれませんが、幅を指定するとカルーセルの一部が途切れてしまいます。

私がカルーセルでやろうとしていることは、Blizzardのホームページにあるカルーセルに似ています。カルーセルはリンク付きの一連の画像を回転しますが、ブラウザーがカルーセルよりも狭い場合、水平スクロールバーは表示されません。コンテンツ。

コード：

<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 に答える