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