resetting bxSlider

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=",
    succe开发者_JAVA百科ss: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/

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

Solution : use reloadSlider

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

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

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

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.

Use the following:

mySlider.reloadSlider();

It will reset the slider

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

I was writing a program which make a bunch of AJAX calls on a timer and displays the results in a bxslider and I also ran into a problem where the bxslider wasn't refreshing.This is how I solved it:

var $slider = null;

And inside the portion of code where you need to initialize or refresh the slider do this:

if ($slider == null) {
    $slider = $('.sliderDashboard').bxSlider({
        slideWidth: 200,
        minSlides: 1,
        maxSlides: 1,
        slideMargin: 10
    });
}
else {
    $slider.reloadSlider();
}

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