19. Reload slider with new settings Click to reload slider with new settings JS: var slider = $('.bxslider').bxSlider({ mode: 'horizontal' }); $('#reload-slider').click(function(e){ e.preventDefault(); slider.reloadSlider({ mode: 'fade', auto: true, pause: 1000, speed: 500 }); }); HTML: Click to reload slider with new settings

18. Reload slider Click to add a slide, then reload the slider JS: var slider = $('.bxslider').bxSlider({ mode: 'horizontal' }); $('#reload-slider').click(function(e){ e.preventDefault(); $('.bxslider').append(''); slider.reloadSlider(); }); HTML: Click to add a slide, then reload the slider

17. Custom easing JS: $('.bxslider').bxSlider({ mode: 'horizontal', useCSS: false, infiniteLoop: false, hideControlOnEnd: true, easing: 'easeOutElastic', speed: 2000 }); HTML:

16. Ticker mode JS: $('.bxslider').bxSlider({ minSlides: 4, maxSlides: 4, slideWidth: 170, slideMargin: 10, ticker: true, speed: 6000 }); HTML:

15. Responsive video JS: $('.bxslider').bxSlider({ video: true, useCSS: false }); HTML:

14. Public methods Click me to go to the next slide Click me to see the total slide count JS: var slider = $('.bxslider').bxSlider({ mode: 'fade' }); $('#slider-next').click(function(){ slider.goToNextSlide(); return false; }); $('#slider-count').click(function(){ var count = slider.getSlideCount(); alert('Slide count: ' + count); return false; }); HTML: Click me to go to the next slide Click me..