1. 简单版

HTML:

<ul class="bxslider"><li><img src="/images/730_200/hill_trees.jpg" /></li><li><img src="/images/730_200/me_trees.jpg" /></li><li><img src="/images/730_200/houses.jpg" /></li>
</ul>

JAVASCRIPT:

$('.bxslider').bxSlider({mode: 'vertical',slideMargin: 5
});

来自官网：http://bxslider.com/examples/vertical-slideshow

2. 升级版

HTML:

 <h3>Vertical Mode</h3>
<div id="bxslider-vertical"><div class="bxslider"><div class="slide"><img src="http://placehold.it/300x200&text=FooBar1" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar2" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar3" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar4" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar5" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar6" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar7" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar8" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar9" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar10" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar11" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar12" class="center-block img-responsive"></div></div></div><hr/><h3>Horizontal Mode</h3><div id="bxslider-horizontal"><div class="bxslider"><div class="slide"><img src="http://placehold.it/300x200&text=FooBar1" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar2" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar3" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar4" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar5" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar6" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar7" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar8" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/133x200&text=FooBar9" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar10" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar11" class="center-block img-responsive"></div><div class="slide"><img src="http://placehold.it/300x200&text=FooBar12" class="center-block img-responsive"></div></div></div>

CSS:

h3{text-align:center;
}
hr {border: none;height: 1px;/* Set the hr color */color: #333; /* old IE */background-color: #333; /* Modern Browsers */
}
#bxslider-vertical .bx-wrapper .bx-controls-direction a {position: absolute;margin-top: -16px;outline: 0;width: 32px;height: 32px;text-indent: -9999px;z-index: 9999;top: auto;}#bxslider-vertical .bx-wrapper .bx-prev {top: 6%!important;left: 85px!important;background: url(https://cdn4.iconfinder.com/data/icons/miu/22/circle_arrow-up-24.png) no-repeat;}#bxslider-vertical .bx-wrapper .bx-next {             bottom: 1%!important;left: 85px;background: url(https://cdn4.iconfinder.com/data/icons/miu/22/circle_arrow-down_download-24.png) no-repeat;}#bxslider-vertical .bx-wrapper .bx-next:hover{background:url(https://cdn4.iconfinder.com/data/icons/miu/22/circle_arrow-down_download-24.png) no-repeat;}#bxslider-vertical .bx-wrapper .bx-viewport,#bxslider-horizontal .bx-wrapper .bx-viewport{-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;border: 1px solid gray;border-radius: 5px;left: 0px!important;padding: 5px;background: transparent;-webkit-transform: translatez(0);-moz-transform: translatez(0);-ms-transform: translatez(0);-o-transform: translatez(0);transform: translatez(0);}#bxslider-horizontal .bx-wrapper{max-width: 845px!important;}

JAVASCRIPT:

    $(document).ready(function() {$('#bxslider-vertical .bxslider').bxSlider({mode: 'vertical', infiniteLoop: false,pager:false,slideWidth: 200,minSlides: 2,                slideMargin: 10                                 });$('#bxslider-horizontal .bxslider').bxSlider({mode: 'horizontal', infiniteLoop: false,pager:false,slideWidth: 200,maxSlides: 4,minSlides: 2,                slideMargin: 10 });});

demo来自：http://jsfiddle.net/b1pprLL9/

原文/转自：bxslider 纵向滑动 vertical image thumbnail slider