0

I am trying to do something rather simple, but having a few problems. I want to use BX-Slider (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/).

1 Answer 1

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.

1
  • Thanks. Bit silly really. I assumed that as BXSlider didn't provide any CSS examples in their documentation/installation notes, that the JS script automatically styles and positions the sliding elements. Sep 5, 2012 at 5:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.