Question

I am trying to do something rather simple, but having a few problems. I want to use BX-Slider (http://www.bxslider.com) in carousel mode. I can get it installed and working but the CSS positioning of the slider is really not right. You can see in my FIDDLE (with plugin attached), the thumbnails go waaaaaay off the screen and they’re supposed to be in the grey box! I would really appreciate some advice on how to rectify this problem.

This is my JS:

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

});

And here is my HTML/slider:

<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>

There is no CSS to go with this apart from the little bits which I added inline and here is the JSFiddle (http://jsfiddle.net/a59ne/1/).

Answer 1

The issue is that the li tags are having a width applied to them, if you set the width in the css.

#main_gallery_slider li { width: 90px; }

That would solve it assuming you want them all the same width.