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')方式创建实例运行。
-
<div class="ax-swiper" axSwiper="autoplay:true"> <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 禁止按钮
<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-prev和ax-next按钮与swiper平级放置。
-
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-prev和ax-next使用ax-sm样式即可。
-
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 定义灰色分页
-
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中即可。参加演示效果。
-
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> <hr/> <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> <hr/> <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> <hr/> <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'参数即表示垂直滚动。
-
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; }
添加slide
axSwiper提供三个添加slide的方法，说明如下：
this.appendSlide(slides)方法可给实例在最后方添加slide，参数说明如下：- slides：添加一个slide的文本（或slide节点）或多个slide的文本数组（或slide节点）
this.prependSlide(slides)方法可给实例在最前方添加slide，参数说明如下：- slides：添加一个slide的文本（或slide节点）或多个slide的文本数组（或slide节点）
this.addSlide(index, slides)方法可给实例在指定位置添加slide，参数说明如下：- index：添加slide的索引位置
- slides：添加一个slide的文本（或slide节点）或多个slide的文本数组（或slide节点）
如果这些slide是由其他插件创建的，不能使用axSwiper的以上方法添加slide，可用原生js的的方法添加slide并借助axSwiper的update方法更新所有的slides。
-
let swiperAdd = new axSwiper('#swiperAdd'), appendAdd = document.querySelector('#appendAdd'), prependAdd = document.querySelector('#prependAdd'), centerAdd = document.querySelector('#centerAdd'), originAdd = document.querySelector('#originAdd'); appendAdd.onclick = () => { swiperAdd.appendSlide('<div class="ax-slide ax-align-origin">最后添加一个</div>'); } prependAdd.onclick = () => { swiperAdd.prependSlide('<div class="ax-slide ax-align-origin">最前添加一个</div>'); } centerAdd.onclick = () => { //axAddElem是AXUI创建节点元素的方法 swiperAdd.addSlide(2, axAddElem('div', { class: 'ax-slide ax-align-origin' }, '中间添加一个')); } originAdd.onclick = () => { //$wrapperEl[0]可获取swiper的wrapper节点 swiperAdd.$wrapperEl[0].appendChild(axAddElem('div', { class: 'ax-slide ax-align-origin' }, '原生JS添加一个')); swiperAdd.update(true); } -
<div class="ax-swiper" id="swiperAdd" style="height: 300px;"> <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> <a href="###" class="ax-btn" id="appendAdd">最后添加一个slide</a> <a href="###" class="ax-btn" id="prependAdd">最前添加一个slide</a> <a href="###" class="ax-btn" id="centerAdd">中间添加一个slide</a> <a href="###" class="ax-btn" id="originAdd">原生添加一个slide</a> -
.ax-swiper{ height:300px; } .ax-slide{ width:100%; height:100%; background-color: #f5f5f5; }
删除slide
axSwiper提供三个添加slide的方法，说明如下：
this.removeSlide(slidesIndexes)方法可删除指定索引的slide，参数说明如下：- slidesIndexes：数字格式，一个数字或数字数组
this.removeAllSlides()方法可删除所有的slides，无参数
如果这些slide是由其他插件创建的，不能使用axSwiper的以上方法删除slide，可用原生js的的方法删除slide并借助axSwiper的update方法更新所有的slides。
-
let swiperDel = new axSwiper('#swiperDel'), centerDel = document.querySelector('#centerDel'), originDel = document.querySelector('#originDel'); centerDel.onclick = () => { swiperDel.removeSlide(2); } originDel.onclick = () => { //$wrapperEl[0]可获取swiper的wrapper节点 swiperDel.$wrapperEl[0].children[1].remove(); swiperDel.update(true); } -
<div class="ax-swiper" id="swiperDel" style="height: 300px;"> <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> <a href="###" class="ax-btn" id="centerDel">中间删除一个slide</a> <a href="###" class="ax-btn" id="originDel">原生删除一个slide</a> -
.ax-swiper{ height:300px; } .ax-slide{ width:100%; height:100%; background-color: #f5f5f5; }