Question

我正在尝试做一些相当简单的事情，但遇到一些问题。我想在轮播模式下使用BX-Slider（www.bxslider.com）。我可以安装和工作，但滑块的CSS定位真的不对。您可以在我的FIDDLE（附带插件）中看到，缩略图在屏幕上显示为waaaaaay，它们应该在灰色框中！我真的很感激如何纠正这个问题。

这是我的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/）。

Answer 1

如果您在css中设置宽度，问题是li标记的宽度已应用于它们。

#main_gallery_slider li { width: 90px; }

如果您希望它们具有相同的宽度，那将解决它。

jQuery轮播定位问题

1 个答案: