collapsing bxslider when element style“display:non

问题:

I would like to use bxslider for a project.

But there is the problem connected with using more than one slider at the same page (three in my example).

$(document).ready(function(){
    $('.slider1').bxSlider({
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 3,
        slideMargin: 10
    });
    $('.slider2').bxSlider({
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 3,
        slideMargin: 10
    });
    $('.slider3').bxSlider({
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 3,
        slideMargin: 10
    });
});

I have made the example: jsfiddle

If you select in my example Option 2 or Option 3 you will see that slider collapses.

As I see it the problem is style="display:none" in div for Option 2 and Option 3.

Can anybody help to solve this problem?

回答1:

I agree. It seems to be related to display:none. Here is how you get past the collapsed spinner....

First, you have to assign each slider to a variable when you create it. Make these global because you will need them later.

sldr1 = $('.slider1').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
        });

when you show the new spinner, you have to use

 sldr1.reloadSlider();

A hallmark of my problem, which your jsfiddle shares, is that I can re-size the window and the collapsed spinner will display properly. I spent a lot of time trying to re-size $(window) or $(document) to get the spinner to react, I failed to find something that would work.

For the benefit of any poor souls who are co-afflicted with this challenge, the important thing to note is that you have to store a reference at init time.

you can not do this in your selection function...

//hide and show logic
.
.
.
//reload slider
sldr1 = $('.slider1').bxSlider();
sldr1.reloadSlider();

Although this seems like it might work, bxSlider() can not be used to simply get a reference to an existing spinner. It actually creates a second slider. If you do this you will notice multiple controls, etc.
A careful re-reading of the documentation shows that this is by design. So not a bug, just a learning thing. Fine. The gentleman contributed his work, so I'll happily take it as it lies.

My one other tip: i was getting white padding on the left of the slides. That was the LI bullets manifesting themselves. Something to do w/ my complicated CSS not playing nice w/ bxslider CSS. I changed to DIV slides inside a DIV container. BxSlider works well with this as per documentation.

good luck