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/equinox/rishi_gallery/eqgall.php

The issue I am running into is when I reset the filters, or select a different filter, the slider doesn't reset. This is the code for the inital load:

    //first load
$.ajax({
    type:"POST",
    url:"sortbystate.php",
    data:"city=&gender=&category=",
    success:function(data){
            //carousel

            $('#thumbs').html(data);


            //alert("whoa, careful there!");
                 $('#thumbs').bxSlider({auto: false, mode:'vertical',
                            autoControls: false,
                            autoHover: true,
                            pager: false,
                            displaySlideQty: 4,
                            speed:800,
                            infiniteLoop: true,      
                            moveSlideQty: 4,

                            controls: true});
    }

});//end ajax

This is the code for handling the change of a filter:

$(".statelist :input").click(function(){

    var carousel = $('#thumbs').data('jcarousel');  
    var state = $('.statelist input:checked').attr('value');
    var gender = $('.gender input:checked').attr('value');
    var category =$('.category input:checked').attr('value');
        $.ajax({
            type:"POST",
            url:"sortbystate.php",
            data:"city="+state+"&gender="+gender+"&category="+category,
            success:function(data){
                    //alert("whoa, careful there!");

                    $('#thumbs').html(data);
                         $('#thumbs').bxSlider({auto: false, mode:'vertical',
                                    autoControls: false,
                                    autoHover: true,
                                    pager: false,
                                    displaySlideQty: 4,
                                    speed:800,
                                    infiniteLoop: true,      
                                    moveSlideQty: 4,

                                    controls: true});


                    //$('#thumbs').jcarousel('add', index, data);
            }


        });//end ajax
    });

I referred bxSlider's documentation and it had a built-in function to handle a reset: destroyShow(): function()
reloadShow(): function()

I am confused as to what I am doing wrong. Even tried emptying the carousel div before loading it with data, using .empty(), no dice.

Thoughts?

Edit: link to the bxSlider website: http://bxslider.com/

Answer 1

Solution : use reloadSlider

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

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

Declaring the "mySlider" variable outside the document-ready block solved the problem for me:

var mySlider;
$(function(){
    mySlider= $('#slider').bxSlider({
        auto: true,
        controls: true
    });

    mySlider.reloadShow();
})

Alex

Answer 4

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

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 6

As the website says: you have the slideshowContainer to be attached to a variable in order to use the public functions. As reloadShow() and destroyShow() are public functions, this is the only way to go. Worked perfectly for me. I've simply put a

var $theslideshow = [functionThatCallsYourSlideshow] 

before my function and called afterwards $theslideshow.destroyShow();

hope this helps