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.

    Add sliders to any website
    with just two lines of code
    Check out sliderui.com!