Reload slider

JS:

var slider = $('.bxslider').bxSlider({
  mode: 'horizontal'
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('
  • '); slider.reloadSlider(); });

    HTML:

    <ul class="bxslider">
      <li><img src="/images/730_200/tree_root.jpg" title="Funky roots" /></li>
      <li><img src="/images/730_200/hill_road.jpg" title="The long and winding road" /></li>
    </ul>
    
    <p><a href="" id="reload-slider">Click to add a slide, then reload the slider</a></p>

    Bonus! A settings object may be passed to the reloadSlider() call (just as when initializing an original slider) and these new settings will be applied with the reload. Check the example here.