jquery - 重置bxSlider

标签 jquery ajax reload carousel

我对实现的轮播采取了不同的方向,选择 bxSlider 而不是 jCarousel。这是我正在构建的图片库 http://rjwcollective.com/equinox/rishi_gallery/eqgall.php

我遇到的问题是当我重置过滤器或选择不同的过滤器时, slider 不会重置。 这是初始加载的代码:

    //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(): 函数()
reloadShow(): 函数()

我很困惑我做错了什么。 甚至尝试在加载数据之前清空轮播 div,使用 .empty(),没有骰子。

想法?

编辑:bxSlider网站链接:http://bxslider.com/

最佳答案

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

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

    mySlider.reloadShow();
})

亚历克斯

关于jquery - 重置bxSlider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5845180/

相关文章:

javascript - 伪装重新加载为新的发布事件,父级不显示 "This page cannot be refreshed without resending information"消息

javascript - 自动完成不会在第一次输入时触发

javascript - 如何在子窗口上调用父窗口函数?

asp.net - 在线控件属性编辑器,类似于 Visual Studio 中的控件属性编辑器

javascript - 从 ajax 调用到 javascript 的返回值

javascript - Galleria主题偶尔加载不出来

google-chrome - ionic 服务实时重新加载不工作

1.4.4 与 1.5.2 中的 jQuery data.length (未定义的长度)

javascript - 无法读取 null bootstrap 崩溃的属性 'querySelectorAll'

javascript - AJAX 和 JavaScript