bxslider 纵向滑动 vertical image thumbnail slider

最新推荐文章于 2025-11-28 04:56:28 发布

原创最新推荐文章于 2025-11-28 04:56:28 发布 · 513 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文介绍如何使用bxSlider插件创建垂直滑动效果。包括简单的垂直滑块示例及更复杂的滑块设置，涉及HTML结构、JavaScript配置及CSS样式等关键信息。

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