0

私はかなり単純なことをしようとしていますが、いくつかの問題があります。カルーセル モードでBX-Slider ( www.bxslider.com )を使用したい。インストールして動作させることはできますが、スライダーの CSS の配置が正しくありません。私のFIDDLE (プラグインが添付されている) を見ると、サムネイルが画面からはみ出し、灰色のボックスにあるはずです! この問題を修正する方法についてアドバイスをいただければ幸いです。

これは私のJSです：

$(document).ready(function() {
    // start article gallery slider
    var main_gallery_slider = $('#main_gallery_slider').bxSlider({
        auto: true,
        controls: false,
        displaySlideQty: 4
    });

});

そして、ここに私のHTML /スライダーがあります：

<div class="main_gallery" style="width:600px; background:#333; padding:10px;">
    <ul id="main_gallery_slider" style="width:600px;">
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
        <li><img src="myImage.jpg" width="90" height="60" /></li>
    </ul>
</div>

私がインラインで追加した小さな部分を除いて、これに対応する CSS はありません。ここにJSFiddle ( http://jsfiddle.net/a59ne/1/ ) があります。

4

1 に答える 1

1

liCSS で幅を設定すると、タグに幅が適用されるという問題があります。

#main_gallery_slider li { width: 90px; }

それらをすべて同じ幅にしたいと仮定すると、それで解決します。

于 2012-09-05T02:42:34.617 に答える