title: resetting bxSlider
body: <p>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 <a href="http://rjwcollective.com/equinox/rishi_gallery/eqgall.php" rel="nofollow">http://rjwcollective.com/equinox/rishi_gallery/eqgall.php</a></p>
  
  <p>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:</p>
  
  <pre><code>    //first load
  $.ajax({
      type:"POST",
      url:"sortbystate.php",
      data:"city=&amp;gender=&amp;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></pre>
  
  <p>This is the code for handling the change of a filter:</p>
  
  <pre><code>$(".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+"&amp;gender="+gender+"&amp;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
      });
  </code></pre>
  
  <p>I referred bxSlider's documentation and it had a built-in function to handle a reset:
  destroyShow(): function()<br>
  reloadShow(): function()            </p>
  
  <p>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.</p>
  
  <p>Thoughts?</p>
  
  <p>Edit: link to the bxSlider website: <a href="http://bxslider.com/" rel="nofollow">http://bxslider.com/</a></p>