Public methods
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:
<div class="bxslider">
<div><img src="http://placehold.it/900x200&text=Slide 1" /></div>
<div><img src="http://placehold.it/900x200&text=Slide 2" /></div>
<div><img src="http://placehold.it/900x200&text=Slide 3" /></div>
</div>
<p><a href="" id="slider-next">Click me to go to the next slide</a><br />
<a href="" id="slider-count">Click me to see the total slide count</a></p>
Examples
- Image gallery with captions
- Auto show with start / stop controls
- Manual show without infinite loop
- Slidehow using adaptiveHeight
- Carousels demystified - in depth explanation with examples
- Carousel - static number of slides showing
- Carousel - dynamic number of slides showing
- Thumbnail pager - method 1
- Thumbnail pager - method 2
- Vertical slideshow
- Custom next / prev control selectors
- Multiple slideshows
- Callback API
- Public methods
- Ticker