v1.0核心
v1.0实例
v2.0

Swiper 幻灯轮播

使用方法 PLUGIN

本框架采用第三方轮播插件swiper，使用的版本是v5.3.1。详见官网：swiper插件。基本结构如下：

Slide 1
Slide 2
Slide 3
Slide 4
                         <div class="swiper-container" id="swiper01">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">内容</div>
                                <div class="swiper-slide">内容</div>
                                <div class="swiper-slide">内容</div>
                            </div>
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                        <script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js"></script>
                        <script type='text/javascript'>
                        var swiper01 = new Swiper('#swiper01', {
                            pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                            },
                            navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                            },
                        });
                        </script>

自定义前后按钮

通过使用样式进行组合可以实现不同效果的前后按钮。请参考如下样式：

  • ax-btn-prev 后退按钮
  • ax-btn-next 前进按钮
  • ax-icon-left 后退图标
  • ax-icon-right 前进图标
  • ax-icon-left-o 带圈后退图标
  • ax-icon-right-o 带圈前进图标
  • ax-round 圆形按钮
  • ax-square 方形按钮
  • ax-icon 纯图标按钮
  • ax-line 边框按钮
  • ax-light 浅色按钮（白色）
  • ax-grey 灰色按钮
  • ax-dark 深色按钮（主色）

按钮风格举例

默认样式。

light样式。

grey样式。

dark样式。

实际效果演示。

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
JS HTML CSS 
  • <script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var swiper02 = new Swiper('#swiper02', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
        var swiper03 = new Swiper('#swiper03', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
        var swiper04 = new Swiper('#swiper04', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
        var swiper05 = new Swiper('#swiper05', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
        var swiper06 = new Swiper('#swiper06', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
    });
</script>
                          
  •                                 <div class="swiper-container" id="swiper02">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-square ax-iconfont ax-icon-left" ></span>
                                    <span class="ax-btn-next ax-square ax-iconfont ax-icon-right" ></span>
                                </div>

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

                                <div class="swiper-container" id="swiper03">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-round ax-iconfont ax-icon-left" ></span>
                                    <span class="ax-btn-next ax-round ax-iconfont ax-icon-right" ></span>
                                </div>

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

                                <div class="swiper-container" id="swiper04">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-round ax-line ax-iconfont ax-icon-left" ></span>
                                    <span class="ax-btn-next ax-round ax-line ax-iconfont ax-icon-right" ></span>
                                </div>

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

                                <div class="swiper-container" id="swiper05">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-iconfont ax-icon-left" ></span>
                                    <span class="ax-btn-next ax-icon ax-iconfont ax-icon-right" ></span>
                                </div>

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

                                <div class="swiper-container" id="swiper06">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-iconfont ax-icon-left-o" ></span>
                                    <span class="ax-btn-next ax-icon ax-iconfont ax-icon-right-o" ></span>
                                </div>
                                    
  • <style>
.swiper-container{
    height:300px;
}
.swiper-slide{
    width:100%;
    height:100%;
    background-color: #f5f5f5;
}
</style>

把按钮放在外面

使用ax-swiper-outer样式将swiper包裹住，ax-btn-prev和ax-btn-next按钮与swiper平级放置。

默认样式。

light样式(深色底可见)。

grey样式。

dark样式。

实际效果演示。

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
JS HTML CSS 
  • <script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var swiper07 = new Swiper('#swiper07', {navigation: {nextEl: '.outnext07', prevEl: '.outprev07',},});
        var swiper08 = new Swiper('#swiper08', {navigation: {nextEl: '.outnext08', prevEl: '.outprev08',},});
        var swiper09 = new Swiper('#swiper09', {navigation: {nextEl: '.outnext09', prevEl: '.outprev09',},});
        var swiper30 = new Swiper('#swiper30', {navigation: {nextEl: '.outnext30', prevEl: '.outprev30',},});
        var swiper31 = new Swiper('#swiper31', {navigation: {nextEl: '.outnext31', prevEl: '.outprev31',},});
        var swiper32 = new Swiper('#swiper32', {navigation: {nextEl: '.outnext32', prevEl: '.outprev32',},});
    });
</script>
                          
  •                                 <div class="ax-swiper-outer" style="margin: 0 100px;">
                                    <div class="swiper-container" id="swiper07">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-iconfont ax-icon-left outprev07"></span>
                                    <span class="ax-btn-next ax-icon ax-iconfont ax-icon-right outnext07"></span>
                                </div>

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

                                <div class="ax-swiper-outer" style="margin: 0 100px;">
                                    <div class="swiper-container" id="swiper08">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon  ax-iconfont ax-icon-left-o outprev08"></span>
                                    <span class="ax-btn-next ax-icon 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="swiper-container" id="swiper09">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-round ax-line  ax-iconfont ax-icon-left outprev09"></span>
                                    <span class="ax-btn-next ax-round ax-line  ax-iconfont ax-icon-right outnext09"></span>
                                </div>

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

                                <div class="ax-swiper-outer" style="margin: 0 100px;">
                                    <div class="swiper-container" id="swiper30">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-square ax-line ax-iconfont ax-icon-left outprev30"></span>
                                    <span class="ax-btn-next ax-square ax-line ax-iconfont ax-icon-right outnext30"></span>
                                </div>

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

                                <div class="ax-swiper-outer" style="margin: 0 100px;">
                                    <div class="swiper-container" id="swiper31">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-round   ax-iconfont ax-icon-left outprev31"></span>
                                    <span class="ax-btn-next ax-round   ax-iconfont ax-icon-right outnext31"></span>
                                </div>

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

                                <div class="ax-swiper-outer" style="margin: 0 100px;">
                                    <div class="swiper-container" id="swiper32">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-square  ax-iconfont ax-icon-left outprev32"></span>
                                    <span class="ax-btn-next ax-square  ax-iconfont ax-icon-right outnext32"></span>
                                </div>
                                    
  • <style>
.swiper-container{
    height:300px;
}
.swiper-slide{
    width:100%;
    height:100%;
    background-color: #f5f5f5;
}
</style>

小图标前进后退

给ax-btn-prev ax-icon和ax-btn-next ax-icon使用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
JS HTML CSS 
  • <script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var swiper17 = new Swiper('#swiper17', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
        var swiper18 = new Swiper('#swiper18', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
        var swiper19 = new Swiper('#swiper19', {navigation: {nextEl: '.ax-btn-next', prevEl: '.ax-btn-prev',},});
        var swiper20 = new Swiper('#swiper20', {navigation: {nextEl: '.outnext10', prevEl: '.outprev10',},});
        var swiper21 = new Swiper('#swiper21', {navigation: {nextEl: '.outnext11', prevEl: '.outprev11',},});
    });
</script>
                          
  •                                 <div class="swiper-container" id="swiper17">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-sm ax-dark ax-iconfont ax-icon-left" ></span>
                                    <span class="ax-btn-next ax-icon ax-sm  ax-dark ax-iconfont ax-icon-right" ></span>
                                </div>

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

                                <div class="swiper-container" id="swiper18">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-sm ax-grey ax-iconfont ax-icon-left-o" ></span>
                                    <span class="ax-btn-next ax-icon ax-sm ax-grey ax-iconfont ax-icon-right-o" ></span>
                                </div>

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

                                <div class="swiper-container" id="swiper19">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color: #333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color: #444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color: #555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color: #666;">Slide 4</div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-sm ax-iconfont ax-icon-left" ></span>
                                    <span class="ax-btn-next ax-icon ax-sm ax-iconfont ax-icon-right" ></span>
                                </div>

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

                                <div class="ax-swiper-outer" style="margin: 0 100px;">
                                    <div class="swiper-container" id="swiper20">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-sm ax-dark ax-iconfont ax-icon-left outprev10"></span>
                                    <span class="ax-btn-next ax-icon ax-sm ax-dark ax-iconfont ax-icon-right outnext10"></span>
                                </div>

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

                                <div class="ax-swiper-outer" style="margin: 0 100px;">
                                    <div class="swiper-container" id="swiper21">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide ax-align-origin">Slide 1</div>
                                            <div class="swiper-slide ax-align-origin">Slide 2</div>
                                            <div class="swiper-slide ax-align-origin">Slide 3</div>
                                            <div class="swiper-slide ax-align-origin">Slide 4</div>
                                        </div>
                                    </div>
                                    <span class="ax-btn-prev ax-icon ax-sm ax-dark ax-iconfont ax-icon-left-o outprev11"></span>
                                    <span class="ax-btn-next ax-icon ax-sm ax-dark ax-iconfont ax-icon-right-o outnext11"></span>
                                </div>

                                <div class="ax-break"></div>
                                    
  • <style>
.swiper-container{
    height:300px;
}
.swiper-slide{
    width:100%;
    height:100%;
    background-color: #f5f5f5;
}
</style>

自定义分页

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

  • ax-pagination-line 定义圆圈分页
  • ax-pagination-dot 定义小点分页
  • ax-pagination-outer 定义swiper外的分页
  • ax-bullet-outer 定义swiper外的分页（与panel组合使用）
  • ax-light 定义浅色分页（白色）
  • ax-grey 定义灰色分页
  • ax-dark 定义深色分页（主色）

内部默认效果。

外部默认效果。

外部小点分页。

外部圆圈分页。

外部小点分页（与panel组合）。

外部圆圈分页（与panel组合）。

实际效果演示。

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
JS HTML CSS 
  • <script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var swiper10 = new Swiper('#swiper10', {pagination: {el: '.ax-pagination-line',clickable :true,},});
        var swiper11 = new Swiper('#swiper11', {pagination: {el: '.ax-pagination-line',clickable :true,},});
        var swiper12 = new Swiper('#swiper12', {pagination: {el: '.ax-pagination-dot',clickable :true,},});
        var swiper13 = new Swiper('#swiper13', {pagination: {el: '.ax-pagination-dot',clickable :true,},});
        var swiper14 = new Swiper('#swiper14', {pagination: {el: '.outpag01',clickable :true,},});
        var swiper15 = new Swiper('#swiper15', {pagination: {el: '.outpag02',clickable :true,},});
    });
</script>
                          
  •                                 <div class="swiper-container" id="swiper10">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                    </div>
                                    <div class="ax-pagination-line ax-light"></div>
                                </div>

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

                                <div class="swiper-container" id="swiper11">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                    </div>
                                    <div class="ax-pagination-line ax-dark"></div>
                                </div>

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

                                <div class="swiper-container" id="swiper12">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                    </div>
                                    <div class="ax-pagination-dot ax-light"></div>
                                </div>

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

                                <div class="swiper-container" id="swiper13">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color:#333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color:#666;">Slide 4</div>
                                    </div>
                                    <div class="ax-pagination-dot ax-dark"></div>
                                </div>

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

                                <div class="swiper-container" id="swiper14">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin">Slide 4</div>
                                    </div>
                                </div>
                                <div class="ax-pagination-outer"><div class="ax-pagination-dot ax-grey outpag01"></div></div>

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

                                <div class="swiper-container" id="swiper15">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin">Slide 4</div>
                                    </div>
                                </div>
                                <div class="ax-pagination-outer"><div class="ax-pagination-dot ax-dark outpag02"></div></div>

                                    
  • <style>
.swiper-container{
    height:300px;
}
.swiper-slide{
    width:100%;
    height:100%;
    background-color: #f5f5f5;
}
</style>

与面板整合

将指示小点和前后箭头用ax-bullet-outer标签包裹，装入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
JS HTML CSS 
  • <script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
          var swiper16 = new Swiper('#swiper16', {pagination: {el: '.outpag03',clickable :true,},});
          var swiper22 = new Swiper('#swiper22', {pagination: {el: '.outpag22',clickable :true,},navigation: {nextEl: '.outnext22', prevEl: '.outprev22',},});
          var swiper23 = new Swiper('#swiper23', {navigation: {nextEl: '.outnext23', prevEl: '.outprev23',},});
    });
</script>
                          
  •                                 <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-bullet-outer"><div class="ax-pagination-dot outpag03"></div></div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-txt">
                                        <div class="swiper-container" id="swiper16">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide ax-align-origin">Slide 1</div>
                                                <div class="swiper-slide ax-align-origin">Slide 2</div>
                                                <div class="swiper-slide ax-align-origin">Slide 3</div>
                                                <div class="swiper-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-bullet-outer"><span class="ax-btn-prev ax-icon ax-sm ax-iconfont ax-icon-left outprev23"></span><span class="ax-btn-next ax-icon ax-sm ax-iconfont ax-icon-right outnext23"></span></div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-txt">
                                        <div class="swiper-container" id="swiper23">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide ax-align-origin">Slide 1</div>
                                                <div class="swiper-slide ax-align-origin">Slide 2</div>
                                                <div class="swiper-slide ax-align-origin">Slide 3</div>
                                                <div class="swiper-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-bullet-outer"><span class="ax-btn-prev ax-icon ax-sm ax-iconfont ax-icon-left outprev22"></span><div class="ax-pagination-dot outpag22"></div><span class="ax-btn-next ax-icon ax-sm ax-iconfont ax-icon-right outnext22"></span></div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-txt">
                                        <div class="swiper-container" id="swiper22">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide ax-align-origin">Slide 1</div>
                                                <div class="swiper-slide ax-align-origin">Slide 2</div>
                                                <div class="swiper-slide ax-align-origin">Slide 3</div>
                                                <div class="swiper-slide ax-align-origin">Slide 4</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    
  • <style>
.swiper-container{
    height:300px;
}
.swiper-slide{
    width:100%;
    height:100%;
    background-color: #f5f5f5;
}
</style>

垂直滚动

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

Slide 1
Slide 2
Slide 3
Slide 4
JS HTML CSS 
  • <script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var swiper160 = new Swiper('#swiper160', {
            direction : 'vertical',
            pagination: {
                el: '.ax-pagination-line',
                clickable :true,
            },
        });
    });
</script>
                          
  •                                 <div class="swiper-container" id="swiper160" style="height: 300px;">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide ax-align-origin" style="background-color: #333;">Slide 1</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color: #444;">Slide 2</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color: #555;">Slide 3</div>
                                        <div class="swiper-slide ax-align-origin" style="background-color: #666;">Slide 4</div>
                                    </div>
                                    <div class="ax-pagination-line"></div>
                                </div>
                                    
  • <style>
.swiper-container{
    height:300px;
}
.swiper-slide{
    width:100%;
    height:100%;
    background-color: #f5f5f5;
}
</style>