title: bxSlider load slide from ajax
body: <p>Is there a way I can insert a slide in bxSlider from ajax and it does not affect the smoothness!</p>
  
  <p>I want to show the contents of only 1 slide on the page load and then clicking of next or prev will load the content accordingly.</p>
  
  <p>Here is what I tried.</p>
  
  <pre><code>    &lt;div id="slider1"&gt;
      &lt;div class="hotProp pager"&gt;
      //Here is div content for the first time page load        
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
      $(function(){
              page_count = 0;
              var slider = $('#slider1').bxSlider({
              easing:'swing',
              controls: true,
      });
  
      $('#go-next').click(function(){
                      page_count += 1;                         
                      //send request for next four properties
                      script_name = "~$sf_request-&gt;getScriptName()`";
                      $.getJSON(script_name+"/frontend/projects", {page_count: page_count}, function(response){
                      div_content = '&lt;div class="hotProp pager"&gt;&lt;div class="clr"&gt;&lt;/div&gt;';
                      //div_content is content for the next slide
                      $('#slider1').html(div_content);
                      });
         slider.goToNextSlide();
         return false;
         });
   }); 
  </code></pre>
  
  <p>It seems like I hijacked the content of slide :P</p>
  
  <p>Please let me know how can I achieve this using API of bxSlider.
  I tried using buildPager, but couldn't get slideIndex as expected.</p>