resetting bxSlider

Question

I took a different direction with a carousel I implemented, opting for bxSlider instead of jCarousel. This is for an image gallery I am building http://rjwcollective.com/equ

Answer 1

the reloadShow funciton execute to function

destoryShow and initShow

destroyShow function delete all style and wrapper which is working fine in horizontal mode but in vertical and fade mode it also delete the content of slider

try replace condition with switch

// unwrap all bx-wrappers
// remove any styles that were appended

if(options.mode == 'fade' || options.mode == 'verticel'){
$parent.unwrap().unwrap();
$parent.children().removeAttr('style');
}else{
    $parent.unwrap().unwrap().removeAttr('style');
    $parent.children().removeAttr('style').not('.pager').remove();
}

hope this helps

Answer 2

You should play with these two - destroyShow() and reloadShow(). My guess is using reloadShow() only but if it doesn't work out try destroyShow() followed by bxSlider(). You'll need a variable as a reference to the plugin api.

var slider =  $('#thumbs').bxSlider( { ... } );
slider.reloadShow(); // or slider.destroyShow(); $('#thumbs').bxSlider( { ... } );

Good luck

Answer 3

** Note : For the multiple bx slider reload on click of the element. *

$(function() {

    var slider1 = $('#slider-1 .product_slider ul').bxSlider({
            pager:false,
            auto:true,
        });

    var slider2 = $('#slider-2 .product_slider ul').bxSlider({
        pager:false,
        auto:true,
    });
    var slider3 = $('#slider-3 .product_slider ul').bxSlider({
        pager:false,
        auto:true,
    });
    var slider4 = $('#slider-4 .product_slider ul').bxSlider({
        pager:false,
        auto:true,
    });

    $('.tab_container ul.nav-tabs li a').on('click',function() {
        slider1.reloadSlider();
        slider2.reloadSlider();
        slider3.reloadSlider();
        slider4.reloadSlider();
    });
});

By: Milan Pandya

Answer 4

To participate in this question as well: the new BxSlider doesn't seem to have a destroyShow() or reloadShow() anymore? It doesn't work for me at least, and it isn't in the API documentation as well... Just saying.

Answer 5

Use the following:

mySlider.reloadSlider();

It will reset the slider

Answer 6

Solution : use reloadSlider

   slider = $('.bxslider').bxSlider();
   slider.reloadSlider();