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

问题是li标签应用了宽度，如果你在css中设置宽度。

#main_gallery_slider li { width: 90px; }

假设您希望它们都具有相同的宽度，那将解决它。

于 2012-09-05T02:42:34.617 回答