13. Callback API JS: $('.bxslider').bxSlider({ onSliderLoad: function(){ // do funky JS stuff here alert('슬라이더 로딩을 완료했습니다. 계속 하려면 확인 클릭!'); }, onSlideAfter: function(){ // do mind-blowing JS stuff here alert('슬라이드 전환이 완료되었습니다. 계속 하려면 확인 클릭!'); } }); HTML:

12. Multiple slideshows Slideshow 1 Slideshow 2 JS: $('#slider1').bxSlider({ mode: 'fade', autoControls: true, pause: 2000 }); $('#slider2').bxSlider({ autoControls: true, pause: 3000, slideMargin: 20 }); HTML: Slideshow 1 Slideshow 2

11. Custom next / prev control selectors This div is outside of the slider | JS: $('.bxslider').bxSlider({ nextSelector: '#slider-next', prevSelector: '#slider-prev', nextText: 'Onward →', prevText: '← Go back' }); HTML: This div is outside of the slider |

10. Vertical slideshow JS: $('.bxslider').bxSlider({ mode: 'vertical', slideMargin: 5 }); HTML:

9. Thumbnail pager - method 2 JS: $('.bxslider').bxSlider({ buildPager: function(slideIndex){ switch(slideIndex){ case 0: return ''; case 1: return ''; case 2: return ''; } } }); HTML:

8. Thumbnail pager - method 1 JS: $('.bxslider').bxSlider({ pagerCustom: '#bx-pager' }); HTML: