bxslider, for image carousel, doesn't seem to be working for me?

Question

So I want to make a little image gallery carousel. Four images across. And you can carousel over to more images. I found bxslider and it seemed like a quick, plug & play, solution. But it's only showing one image per slide.

I think I've followed their directions. But I've obviously done something wrong.

I've left their css and js untouched. My HTML looks like a copy of of theirs. And I put this at the end of their js file:

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        auto: true,
        autoControls: false,
        minSlides: 4
    });
});

Here's the jsfiddle: http://jsfiddle.net/7YH8Q/

Anyone know how I can get this to work?

Answer 1

The problem is you didn't set slideWidth. In order to setup a carousal, you have to provide 3 values, namely : slideWidth, minSlides, maxSlides.

Here's a working fiddle http://jsfiddle.net/hwQ6C/

$('.bxslider').bxSlider({
   slideWidth: 200,
   minSlides: 4,
   maxSlides: 5,
   slideMargin: 10
});

Answer 2

Multiple items per slides and fade mode is not currently supported. This has been flaged as an issue. Changing mode is the only option to fix this with bxslider.