重置bxSlider

Question

我对我实施的旋转木马采取了不同的方向，选择了bxSlider而不是jCarousel。这适用于我正在构建http://rjwcollective.com/equinox/rishi_gallery/eqgall.php

的图片库

我遇到的问题是当我重置过滤器或选择不同的过滤器时，滑块不会重置。 这是初始负荷的代码：

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

这是处理过滤器更改的代码：

$(".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
    });

我提到了bxSlider的文档，它有一个内置函数来处理重置： destroyShow（）：function（）
reloadShow（）：function（）

我很困惑我做错了什么。 甚至尝试在使用.empty（），没有骰子加载数据之前清空旋转木马div。

思想？

编辑：指向bxSlider网站的链接：http://bxslider.com/

Answer 1

在文档就绪块之外声明“mySlider”变量解决了我的问题：

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

    mySlider.reloadShow();
})

亚历

Answer 2

解决方案：使用reloadSlider

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

Answer 3

正如网站所说：您要将slideshowContainer附加到变量才能使用公共功能。由于reloadShow()和destroyShow()是公共函数，因此这是唯一的方法。为我工作完美。 我只是简单地说了一下

var $theslideshow = [functionThatCallsYourSlideshow] 

在我的功能之前，然后调用$theslideshow.destroyShow();

希望这会有所帮助

Answer 4

reloadShow函数执行到函数

destoryShow和initShow

destroyShow函数删除在水平模式下工作正常的所有样式和包装器 但在垂直和淡入淡出模式下，它也会删除滑块的内容

尝试用开关

替换条件

// 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();
}

希望这会有所帮助

Answer 5

也参与这个问题：新的BxSlider似乎没有destroyShow（）或reloadShow（）了？它至少对我不起作用，它也不在API文档中......只是说。

Answer 6

使用以下内容：

mySlider.reloadSlider();

它将重置滑块

Answer 7

**注意：对于单击元素时的多个bx滑块重新加载。 *

$（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();
    });
});

作者：米兰潘迪亚

Answer 8

我正在编写一个程序，它在一个计时器上进行一堆AJAX调用并在bxslider中显示结果，我也遇到了bxslider没有刷新的问题。这就是我解决它的方法：

var $slider = null;

在代码中需要初始化或刷新滑块的部分内：

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

Answer 9

你应该玩这两个 - destroyShow()和reloadShow()。我的猜测是仅使用reloadShow()，但如果不能解决问题，请尝试destroyShow()，然后bxSlider()。你需要一个变量作为插件api的引用。

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

祝你好运