text slider jquery example

http://bxslider.com/examples/carousel-demystified

bxSlider_jquery.zip

JS:

$(document).ready(function(){
  $('.slider8').bxSlider({
    mode: 'vertical',
    slideWidth: 300,
    minSlides: 2,
    slideMargin: 10
  });
});

HTML:

<div class="slider8">
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar4"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar5"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar9"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar10"></div>
</div>

Vertical carousels follow most of the same rules as horizontal carousels. However, the maxSlides setting is not used as vertical carousels will always have only one slide across. Therefore, we do not have to accomodate different screen widths with this setting.