重置bxSlider

问题描述

我采取了不同的方向旋转木马我实现了，选择了bxSlider代替的jCarousel。这是一个图片库我建立 http://rjwcollective.com/equinox/rishi_gallery/eqgall。 PHP

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

我遇到的是当我重新设置过滤器，或选择不同的过滤器，滑块不会重置的问题。这是code为inital负载：

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

这是在code处理过滤器的变化：

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

我提到bxSlider的文档，并且它有一个内置的函数来处理复位：destroyShow（）（）的函数
reloadShow（）函数（）

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

我很困惑，我在做什么错。即使试图与数据加载，使用.empty（），没有骰子之前清空转盘格。

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.

思考？

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

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

推荐答案

的声明mySlider可变文档就绪块外解决了这个问题对我来说：

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

亚历

这篇关于重置bxSlider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！