title: Destroy/Reload bxSlider between AJAX calls?
body: <p>I have my start page which has a bxSlider (full-width layout) and a wrapper around this element.</p>
  
  <p>However when I click to go onto another page via ajax, I have a javascript action that will reload the slider wrapper content since I change from a <strong>"1 slider full-width layout"</strong> to <strong>"2 sliders with half-width layout"</strong></p>
  
  <p>Therefore in total there are 3 sliders, but if you load the start page directly, you see only 1. If you load another page directly (without ajax), you see the other 2 sliders.</p>
  
  <p>I initialize the sliders like this:</p>
  
  <pre><code>banner1 = $('#page_banner1').show().bxSlider({
      mode: 'fade',
      controls: false,
      pager: false,
      caption: false,
      slideWidth: 540,
      responsive: true,
      speed: 700,
      pause: 7500,
      auto: true
  });
  
  banner2 = $('#page_banner2').show().bxSlider({
      mode: 'fade',
      controls: false,
      pager: false,
      caption: false,
      slideWidth: 540,
      responsive: true,
      speed: 700,
      pause: 9500,
      auto: true
  });
  
  banner_full = $('#page_banner_full').show().bxSlider({
      mode: 'fade',
      controls: false,
      pager: false,
      caption: false,
      slideWidth: 1080,
      responsive: true,
      speed: 700,
      pause: 7500,
      auto: true
  });
  </code></pre>
  
  <p>So for example, on one of the pages (not start page), then <strong>banner1</strong> and <strong>banner2</strong> are bxSliders but <strong>banner_full</strong> returns NULL:</p>
  
  <pre><code>&lt;div id="banner_wrapper" class="page_block"&gt;
  
      &lt;div id="page_banner1" class="page_slider" style="display: none;"&gt;
          &lt;div id="banner1_0"&gt;
              &lt;img id="img_0" src="cats.png" border="0"&gt;
          &lt;/div&gt;
          &lt;div id="banner1_1"&gt;
              &lt;img id="img_1" src="dogs.png" border="0"&gt;
          &lt;/div&gt;
          &lt;div id="banner1_2"&gt;
              &lt;img id="img_2" src="fish.png" border="0"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="page_banner2" class="page_slider" style="display: none;"&gt;
          &lt;div id="banner2_0"&gt;
              &lt;img id="img_0" src="banana.png" border="0"&gt;
          &lt;/div&gt;
          &lt;div id="banner2_1"&gt;
              &lt;img id="img_1" src="orange.png" border="0"&gt;
          &lt;/div&gt;
          &lt;div id="banner2_2"&gt;
              &lt;img id="img_2" src="apple.png" border="0"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I guess I need to branch my initialization code out and into functions? But unsure on the best way to approach re-creating that into a function that I can easily call (where I would check if typeof slider !== 'undefined' then reload/destroy else run initialize code).</p>
  
  <p>I know that bxSlider supports loading dynamic content... except I'm actually changing the full content <strong>$('#banner_wrapper').html(data);</strong> as I use different options for the sliders (width etc.).</p>
  
  <p>Here's the HTML of what the full slider looks like:</p>
  
  <pre><code>&lt;div id="banner_wrapper" class="page_block"&gt;
  
      &lt;div id="page_banner_full" class="page_slider" style="display: none;"&gt;
          &lt;div id="banner_full_0"&gt;
              &lt;img id="img_0" src="football.png" border="0"&gt;
          &lt;/div&gt;
          &lt;div id="banner_full_1"&gt;
              &lt;img id="img_1" src="rugby.png" border="0"&gt;
          &lt;/div&gt;
          &lt;div id="banner_full_2"&gt;
              &lt;img id="img_2" src="basketball.png" border="0"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Ok here's what I've done to branch the initialize bxSlider code out into a function:</p>
  
  <pre><code>global_product.prototype.slider = function(elem, type, pause_time) {
      var slider_elem = $(elem);
  
      if(typeof(slider_elem) === 'undefined') {
          return false;
      }
  
      slider_elem.show();
  
      if(typeof(slider_elem.getSlideCount) !== 'function') {
          if(type === 'large') {
              slider_elem.bxSlider({
                  mode: 'fade',
                  controls: false,
                  pager: false,
                  caption: false,
                  slideWidth: 1080,
                  responsive: true,
                  speed: 700,
                  pause: pause_time,
                  auto: true
              });
          } else {
              slider_elem.bxSlider({
                  mode: 'fade',
                  controls: false,
                  pager: false,
                  caption: false,
                  slideWidth: 540,
                  responsive: true,
                  speed: 700,
                  pause: pause_time,
                  auto: true
              });
          }
  
          return slider_elem;
      } else {
          slider_elem.destroySlider();
      }
  
      return false;
  };
  
  global_product.prototype.sliderDestroy = function(elem) {
      var destroy_elem = $(elem);
  
      if(typeof(destroy_elem) === 'undefined') {
          return false;
      }
  
      if(typeof(destroy_elem.destroySlider) === 'function') {
          destroy_elem.destroySlider();
      }
  };
  
  global_product.prototype.reloadSlider = function(elem) {
      var reload_elem = $(elem);
  
      if(typeof(reload_elem) === 'undefined') {
          return false;
      }
  
      if(typeof(reload_elem.reloadSlider) === 'function') {
          reload_elem.reloadSlider();
      }
  };
  </code></pre>
  
  <p>Which works with:</p>
  
  <pre><code>global_product.prototype.slider_ajax = function(page) {
  
      banner1 = this.sliderDestroy('#page_banner1');
      banner2 = this.sliderDestroy('#page_banner2');
      banner_full = this.sliderDestroy('#page_banner_full');
  
      $.ajax({
          async: true,
          type: 'GET',
          url: page,
          success: $.proxy(function(data)
          {
              $('#partners').html(data);
  
              banner_banner1 = this.slider('#page_banner1', '', 7500);
              banner_banner2 = this.slider('#page_banner2', '', 9500);
              banner_full = this.slider('#page_banner_full', 'large', 7500);
  
  
          }, this)
      });
  
      this.reloadSlider('#page_banner1');
      this.reloadSlider('#page_banner2');
      this.reloadSlider('#page_banner_full');
  };
  </code></pre>
  
  <p>But I haven't been able to destroy the slider 'straight away'? It seems it waits until bxSlider finishes first before destroying it and loading the other one?</p>
  
  <p>I guess I should be using 'this' instead of 'product' inside the prototype functions, but I don't think that's the real reason why things aren't working correctly? -> hmm this seems not to work - 'this' is not defined</p>
  
  <p>Any ideas? right now the slider on start page works, then I click and load another page and the DOM shows the two sliders, which seem to have been initialized as bxSliders but they haven't started and they don't show up as visible?</p>
  
  <p>Ahhh so I did have to fix my 'product' var calls to 'this' inside the prototype. Code updated and works well now...</p>