Vertical slideshow
JS:
$('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Onward →',
prevText: '← Go back'
});
HTML:
<ul class="bxslider">
<li><img src="http://placehold.it/900x200&text=Slide 1" /></li>
<li><img src="http://placehold.it/900x200&text=Slide 2" /></li>
<li><img src="http://placehold.it/900x200&text=Slide 3" /></li>
</ul>
<div class="outside">
<h3>This div is outside of the slider</h3>
<p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
</div>
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