Swiper 幻灯轮播

使用方法

本框架集成了第三方轮播插件swiper,使用的版本是v8.1.4。详见官网:swiper插件,在原插件基础上做了不少修改以作为AXUI的核心引擎之一。

  • 将实例名改成axSwiper,通过new axSwiper使用插件
  • 修改轮播插件的dom类名,均已ax-开头
  • 如果有ax-pages、ax-next、ax-prev、ax-progress的Dom,则不要设置参数也可以自动创建参数运行
  • 新增获取参数的方法,可对DOM使用data属性
  • 懒加载的相关样式改为了ax-lazy、ax-loading、ax-lazy-loading和ax-lazy-loaded

使用方法

插件运行方式有两种:

  • ax*属性:对ax-swiper标签使用axSwiper属性即可按默认参数运行插件。
  • js实例:通过new axSwiper('#ID')方式创建实例运行。
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
  •                                             <div class="ax-swiper" axSwiper>
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                    <div class="ax-pages"></div>
                                                    <div class="ax-next"></div>
                                                    <div class="ax-prev"></div>
                                                </div>
                    
                                                <div class="ax-break"></div>
                    
                                                <div class="ax-swiper" id="swiper01">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                    <div class="ax-pages"></div>
                                                    <div class="ax-next"></div>
                                                    <div class="ax-prev"></div>
                                                </div>
                                            
  •                                             let swiper01 = new axSwiper('#swiper01');
                                            
  •                                             .ax-swiper {
                                                    height: 300px;
                                                }
                                        
                                                .ax-slide {
                                                    width: 100%;
                                                    height: 100%;
                                                    background-color: #f5f5f5;
                                                }
                                            

自定义前后按钮

默认参数运行的swiper的前后按钮是“向左”和“向右”的图标。通过样式组合使用不同风格的按钮图标。请参考如下样式:

  • ax-prev 默认后退按钮
  • ax-next 默认前进按钮
  • ax-prev-o 带圈后退图标
  • ax-prev -o 带圈前进图标
  • ax-prev ax-round 圆形边框按钮
  • ax-prev ax-square 方形边框按钮
  • ax-prev ax-fill 实心按钮
  • ax-prev ax-light 浅色按钮(白色)
  • ax-prev ax-grey 灰色按钮
  • ax-prev ax-dark 深色按钮
  • ax-prev ax-disabled 禁止按钮
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
                            <div class="ax-swiper" axSwiper>
                                <div class="ax-wrapper">
                                    <div class="ax-slide ax-align-origin">Slide 1</div>
                                    <div class="ax-slide ax-align-origin">Slide 2</div>
                                    <div class="ax-slide ax-align-origin">Slide 3</div>
                                    <div class="ax-slide ax-align-origin">Slide 4</div>
                                </div>
                                <span class="ax-prev ax-square"></span>
                                <span class="ax-next ax-square"></span>
                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-swiper" axSwiper>
                                <div class="ax-wrapper">
                                    <div class="ax-slide ax-align-origin">Slide 1</div>
                                    <div class="ax-slide ax-align-origin">Slide 2</div>
                                    <div class="ax-slide ax-align-origin">Slide 3</div>
                                    <div class="ax-slide ax-align-origin">Slide 4</div>
                                </div>
                                <span class="ax-prev ax-round"></span>
                                <span class="ax-next ax-round"></span>
                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-swiper" axSwiper>
                                <div class="ax-wrapper">
                                    <div class="ax-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                </div>
                                <span class="ax-prev ax-round ax-fill"></span>
                                <span class="ax-next ax-round ax-fill "></span>
                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-swiper" axSwiper>
                                <div class="ax-wrapper">
                                    <div class="ax-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                </div>
                                <span class="ax-prev"></span>
                                <span class="ax-next"></span>
                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-swiper" axSwiper>
                                <div class="ax-wrapper">
                                    <div class="ax-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                    <div class="ax-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                </div>
                                <span class="ax-prev-o"></span>
                                <span class="ax-next -o"></span>
                            </div>
                        

把按钮放在外面

使用ax-swiper-outer样式将swiper包裹住,ax-prevax-next按钮与swiper平级放置。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
  •         let swiper07 = new axSwiper('#swiper07', {navigation: {nextEl: '.outnext07', prevEl: '.outprev07',},});
            let swiper08 = new axSwiper('#swiper08', {navigation: {nextEl: '.outnext08', prevEl: '.outprev08',},});
            let swiper09 = new axSwiper('#swiper09', {navigation: {nextEl: '.outnext09', prevEl: '.outprev09',},});
            let swiper30 = new axSwiper('#swiper30', {navigation: {nextEl: '.outnext30', prevEl: '.outprev30',},});
            let swiper31 = new axSwiper('#swiper31', {navigation: {nextEl: '.outnext31', prevEl: '.outprev31',},});
            let swiper32 = new axSwiper('#swiper32', {navigation: {nextEl: '.outnext32', prevEl: '.outprev32',},});
                              
  •                                         <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper07">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev outprev07"></span>
                                                <span class="ax-next  outnext07"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper08">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev ax-iconfont ax-icon-left-o outprev08"></span>
                                                <span class="ax-next ax-iconfont ax-icon-right-o outnext08"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper09">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev ax-round ax-fill outprev09"></span>
                                                <span class="ax-next ax-round ax-fill outnext09"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper30">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev ax-square ax-fill outprev30"></span>
                                                <span class="ax-next ax-square ax-fill outnext30"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper31">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev ax-round outprev31"></span>
                                                <span class="ax-next ax-round outnext31"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper32">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev ax-square outprev32"></span>
                                                <span class="ax-next ax-square outnext32"></span>
                                            </div>
                                        
  • .ax-swiper{
        height:300px;
    }
    .ax-slide{
        width:100%;
        height:100%;
        background-color: #f5f5f5;
    }
                                        

小图标前进后退

ax-prevax-next使用ax-sm样式即可。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
  •         let swiper20 = new axSwiper('#swiper20', {navigation: {nextEl: '.outnext10', prevEl: '.outprev10',},});
            let swiper21 = new axSwiper('#swiper21', {navigation: {nextEl: '.outnext11', prevEl: '.outprev11',},});
                              
  •                                         <div class="ax-swiper" axSwiper>
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin">Slide 4</div>
                                                </div>
                                                <span class="ax-prev ax-sm ax-dark"></span>
                                                <span class="ax-next ax-sm ax-dark "></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper" axSwiper>
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin">Slide 4</div>
                                                </div>
                                                <span class="ax-prev ax-sm ax-grey ax-iconfont ax-icon-left-o"></span>
                                                <span class="ax-next ax-sm ax-grey ax-iconfont ax-icon-right-o"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper" axSwiper>
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin" style="background-color: #333;">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color: #444;">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color: #555;">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color: #666;">Slide 4</div>
                                                </div>
                                                <span class="ax-prev ax-sm"></span>
                                                <span class="ax-next ax-sm "></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper20">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev ax-sm ax-dark outprev10"></span>
                                                <span class="ax-next ax-sm ax-dark outnext10"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper-outer" style="margin: 0 100px;">
                                                <div class="ax-swiper" id="swiper21">
                                                    <div class="ax-wrapper">
                                                        <div class="ax-slide ax-align-origin">Slide 1</div>
                                                        <div class="ax-slide ax-align-origin">Slide 2</div>
                                                        <div class="ax-slide ax-align-origin">Slide 3</div>
                                                        <div class="ax-slide ax-align-origin">Slide 4</div>
                                                    </div>
                                                </div>
                                                <span class="ax-prev ax-sm ax-dark  ax-iconfont ax-icon-left-o outprev11"></span>
                                                <span class="ax-next ax-sm ax-dark  ax-iconfont ax-icon-right-o outnext11"></span>
                                            </div>
        
                                            <div class="ax-break"></div>
                                        
  • <style>
    .ax-swiper{
        height:300px;
    }
    .ax-slide{
        width:100%;
        height:100%;
        background-color: #f5f5f5;
    }
    </style>
                                        

自定义分页

通过样式组合可以自定义分页风格,同时可以跳出swiper结构自由安排分页的代码。样式如下:

  • ax-pages 定义小点分页
  • ax-pages ax-line 定义圆圈分页
  • ax-swiper-outer 定义swiper外的分页
  • ax-pages ax-light 定义浅色分页(白色)
  • ax-pages ax-grey 定义灰色分页
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
  •         let swiper14 = new axSwiper('#swiper14', {pagination: {el: '.outpag01',clickable :true,},});
            let swiper15 = new axSwiper('#swiper15', {pagination: {el: '.outpag02',clickable :true,},});
                              
  •                                         lt;div class="ax-swiper" axSwiper>
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                                </div>
                                                <div class="ax-pages ax-line ax-light"></div>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper" axSwiper>
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                                </div>
                                                <div class="ax-pages ax-line"></div>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper" axSwiper>
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                                </div>
                                                <div class="ax-pages ax-light"></div>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper" axSwiper>
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                                </div>
                                                <div class="ax-pages"></div>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper" id="swiper14">
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin">Slide 4</div>
                                                </div>
                                            </div>
                                            <div class="ax-swiper-outer">
                                                <div class="ax-pages ax-grey outpag01"></div>
                                            </div>
        
                                            <div class="ax-break"></div>
        
                                            <div class="ax-swiper" id="swiper15">
                                                <div class="ax-wrapper">
                                                    <div class="ax-slide ax-align-origin">Slide 1</div>
                                                    <div class="ax-slide ax-align-origin">Slide 2</div>
                                                    <div class="ax-slide ax-align-origin">Slide 3</div>
                                                    <div class="ax-slide ax-align-origin">Slide 4</div>
                                                </div>
                                            </div>
                                            <div class="ax-swiper-outer">
                                                <div class="ax-pages outpag02"></div>
                                            </div>
                                        
  • .ax-swiper{
        height:300px;
    }
    .ax-slide{
        width:100%;
        height:100%;
        background-color: #f5f5f5;
    }
                                        

与面板整合

将指示小点和前后箭头用ax-swiper-outer ax-inline标签包裹,装入ax-panel-header中即可。参加演示效果。

关于中国swiper轮播
Slide 1
Slide 2
Slide 3
Slide 4
关于中国swiper轮播
Slide 1
Slide 2
Slide 3
Slide 4
关于中国swiper轮播
Slide 1
Slide 2
Slide 3
Slide 4
  •           let swiper16 = new axSwiper('#swiper16', {pagination: {el: '.outpag03',clickable :true,},});
              let swiper22 = new axSwiper('#swiper22', {pagination: {el: '.outpag22',clickable :true,},navigation: {nextEl: '.outnext22', prevEl: '.outprev22',},});
              let swiper23 = new axSwiper('#swiper23', {navigation: {nextEl: '.outnext23', prevEl: '.outprev23',},});
                              
  •                                         <div class="ax-panel ax-border ax-radius">
                                                <div class="ax-panel-header ax-bar ax-row">
                                                    <div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">swiper轮播</span></div>
                                                    <div class="ax-swiper-outer ax-inline">
                                                        <div class="ax-pages outpag03"></div>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                                <div class="ax-panel-body ax-txt">
                                                    <div class="ax-swiper" id="swiper16">
                                                        <div class="ax-wrapper">
                                                            <div class="ax-slide ax-align-origin">Slide 1</div>
                                                            <div class="ax-slide ax-align-origin">Slide 2</div>
                                                            <div class="ax-slide ax-align-origin">Slide 3</div>
                                                            <div class="ax-slide ax-align-origin">Slide 4</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ax-break"></div>
                                            <div class="ax-panel ax-border ax-radius">
                                                <div class="ax-panel-header ax-bar ax-row">
                                                    <div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">swiper轮播</span></div>
                                                    <div class="ax-swiper-outer ax-inline"><span class="ax-prev outprev23"></span><span class="ax-next outnext23"></span></div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                                <div class="ax-panel-body ax-txt">
                                                    <div class="ax-swiper" id="swiper23">
                                                        <div class="ax-wrapper">
                                                            <div class="ax-slide ax-align-origin">Slide 1</div>
                                                            <div class="ax-slide ax-align-origin">Slide 2</div>
                                                            <div class="ax-slide ax-align-origin">Slide 3</div>
                                                            <div class="ax-slide ax-align-origin">Slide 4</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ax-break"></div>
                                            <div class="ax-panel ax-border ax-radius">
                                                <div class="ax-panel-header ax-bar ax-row">
                                                    <div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">swiper轮播</span></div>
                                                    <div class="ax-swiper-outer ax-inline"><span class="ax-prev outprev22"></span>
                                                        <div class="ax-pages ax-line outpag22"></div><span class="ax-next outnext22"></span>
                                                    </div>
                                                </div>
                                                <div class="ax-break-line"></div>
                                                <div class="ax-panel-body ax-txt">
                                                    <div class="ax-swiper" id="swiper22">
                                                        <div class="ax-wrapper">
                                                            <div class="ax-slide ax-align-origin">Slide 1</div>
                                                            <div class="ax-slide ax-align-origin">Slide 2</div>
                                                            <div class="ax-slide ax-align-origin">Slide 3</div>
                                                            <div class="ax-slide ax-align-origin">Slide 4</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        
  • <style>
    .ax-swiper{
        height:300px;
    }
    .ax-slide{
        width:100%;
        height:100%;
        background-color: #f5f5f5;
    }
    </style>
                                        

垂直滚动

使用direction : 'vertical'参数即表示垂直滚动。

Slide 1
Slide 2
Slide 3
Slide 4
  •         let swiper160 = new axSwiper('#swiper160', {
                direction : 'vertical',
            });
                              
  •                                 <div class="ax-swiper" id="swiper160" style="height: 300px;">
                                        <div class="ax-wrapper">
                                            <div class="ax-slide ax-align-origin" style="background-color: #333;">Slide 1</div>
                                            <div class="ax-slide ax-align-origin" style="background-color: #444;">Slide 2</div>
                                            <div class="ax-slide ax-align-origin" style="background-color: #555;">Slide 3</div>
                                            <div class="ax-slide ax-align-origin" style="background-color: #666;">Slide 4</div>
                                        </div>
                                        <div class="ax-pages ax-line"></div>
                                    </div>
                                        
  • .ax-swiper{
        height:300px;
    }
    .ax-slide{
        width:100%;
        height:100%;
        background-color: #f5f5f5;
    }