Slider 轮播滑块
使用方法
本框架集成了第三方轮播插件swiper，使用的版本是v8.1.4。详见官网：swiper插件，在原插件基础上做了不少修改以作为AXUI的核心引擎之一。
- 将实例名改成ax000Swiper，通过new ax000Swiper使用插件
- 修改轮播插件的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标签使用
ax000Swiper属性即可按默认参数运行插件。 - js实例：通过
new ax000Swiper('#ID')方式创建实例运行。
在默认配置下，不显示分页和前后导航；滚轮一次将滑过窗口距离；快速拖拽一次将滚动一个滑块距离。另外不要对ax-slider外容器使用box-sizing:border-box属性，否则边框width和padding值都将作为滑块尺寸计算依据。
-
<div class="ax-slider axis-x" axSlider> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" id="jsIns"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
new axSlider('#jsIns'); -
.ax-slider { border: 1px solid #ebebeb; width: 100%; } .ax-slider .ax-slider-wrapper li { display: flex; justify-content: center; align-items: center; } .ax-slider li.odd { background-color: antiquewhite; } .ax-slider li.even { background-color: lightsalmon; } .ax-slider.axis-x { height: 300px; } .ax-slider.axis-x .ax-slider-wrapper li { width: 100px; height: 300px; } .ax-slider.axis-y { height: 500px; } .ax-slider.axis-y .ax-slider-wrapper li { height: 100px; } .ax-slider.axis-x .ax-slider-wrapper li.s01, .ax-slider.axis-x .ax-slider-wrapper li.s04, .ax-slider.axis-x .ax-slider-wrapper li.s06, .ax-slider.axis-x .ax-slider-wrapper li.s09, .ax-slider.axis-x .ax-slider-wrapper li.s13 { width: 200px; } .ax-slider.axis-x .ax-slider-wrapper li.s02, .ax-slider.axis-x .ax-slider-wrapper li.s08, .ax-slider.axis-x .ax-slider-wrapper li.s10, .ax-slider.axis-x .ax-slider-wrapper li.s15, .ax-slider.axis-x .ax-slider-wrapper li.s17 { width: 160px; } .ax-slider.axis-x .ax-slider-wrapper li.s03, .ax-slider.axis-x .ax-slider-wrapper li.s07, .ax-slider.axis-x .ax-slider-wrapper li.s12, .ax-slider.axis-x .ax-slider-wrapper li.s16, .ax-slider.axis-x .ax-slider-wrapper li.s18 { width: 260px; } .ax-slider.axis-y .ax-slider-wrapper li.s01, .ax-slider.axis-y .ax-slider-wrapper li.s04, .ax-slider.axis-y .ax-slider-wrapper li.s06, .ax-slider.axis-y .ax-slider-wrapper li.s09, .ax-slider.axis-y .ax-slider-wrapper li.s13 { height: 200px; } .ax-slider.axis-y .ax-slider-wrapper li.s02, .ax-slider.axis-y .ax-slider-wrapper li.s08, .ax-slider.axis-y .ax-slider-wrapper li.s10, .ax-slider.axis-y .ax-slider-wrapper li.s15, .ax-slider.axis-y .ax-slider-wrapper li.s17 { height: 160px; } .ax-slider.axis-y .ax-slider-wrapper li.s03, .ax-slider.axis-y .ax-slider-wrapper li.s07, .ax-slider.axis-y .ax-slider-wrapper li.s12, .ax-slider.axis-y .ax-slider-wrapper li.s16, .ax-slider.axis-y .ax-slider-wrapper li.s18 { height: 260px; } .ax-slider-pagination.mypagi[type='lamp']>* { background-color: rgba(250, 0, 0, 0.5); } .ax-slider-pagination.mypagi[type='lamp'] [active] { background-color: red; } .ax-slider-prev.mynavi, .ax-slider-next.mynavi { color: red; } .ax-slider-prev.mynavi[disabled], .ax-slider-next.mynavi[disabled] { color: rgba(250, 0, 0, 0.5); }
启用分页和导航
默认不使用分页，参数pagination可设置分页，将参数设置为pagination:false或pagination.enable:false将禁用分页；设置为pagination:true或pagination.enable:true将启用分页。
默认不使用前后导航，参数navigation可设置前后导航参数，将参数设置为navigation:false或navigation.enable:false将禁用前后导航；设置为navigation:true或navigation.enable:true将启用前后导航。
-
<div class="ax-slider axis-x" axSlider="pagination:true,navigation:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
初始化
默认从第一页的第一个滑块开始，如果需要初始化后直接跳转到某滑块可通过active参数设置滑块索引，0表示第一个滑块。
-
<div class="ax-slider axis-x" axSlider="pagination:true,navigation:true,active:3"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
启用懒加载
默认不使用懒加载，将一次性的加载完数据，对于数据量小或者加载资源小，不启用懒加载也是没多大问题的；但是当遇到有很多滑块而且需要加载资源比较复杂，那么启用懒加载可以缓解带宽压力并减少浏览器内存消耗。
开启步骤如下：
- 1、设置参数lazyShow:true打开懒加载功能
- 2、对滑块内的img、video、audio、iframe使用data-src属性放置真实资源，src属性可以放置空图片（blank图片）
如果懒加载异步内容，可使用其他标签带上data-src属性，可以填一个同域网址，结果将从网址获取HTML内容，如果需要获取指定节点内容，可在网址后加上#id。
如果需要向异步地址传递参数，则请使用data-async属性，写法举例：data-async="{limit:3,start:120}"，两侧的大括号可省略。
如果预料异步获取的内容不是HTML文本，而是数组或对象，那么需要使用lazyload的async方法监听向滑块写入数据。
设置懒加载后，内容滑块出现在外容器中才会实时加载，会有缓冲滞后效果。
-
<div class="ax-slider axis-x" axSlider="lazyShow:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li><img data-src="examples/images/china01.jpg"></li> <li><img data-src="examples/images/china02.jpg"></li> <li><iframe data-src="https://www.axui.cn" frameborder="0"></iframe></li> <li data-src="ajax/world.html#China"></li> </ul> </div> -
<同上>
数据源
本插件支持多种数据源，以上示例使用的是物理节点的静态数据；如果数据可能是未知的或动态的，那么需要使用参数content传入数据，支持如下写法：
- 图片地址字符串：类似“xxx/1jpg,xxx/2.jpg,xxx/3.jpg”，默认以英文逗号分开，分隔符应该与参数separator一致。
- json地址字符串：类似“xxx/1.json”，表示从异步json文件获取数据，此时应该将参数async设为true，异步文件写法同下方“对象数组”。
- 节点数组：类似[dom1,dom2,dom3...]。
- 字符串数组：类似['xxx/1jpg','xxx/2.jpg','xxx/3.jpg']。
- 对象数组：每一项包含的属性如下：
- type：滑块类型，支持的类型有image、text、node、url、async；如果不填将以text类型表示。
- content：滑块内容，根据type而定：
- 如果type为image，content应该是一个图片地址
- 如果type为url，content应该是一个网页网址。
- 如果type为async，content应该是json文件地址
- 如果type为text，content应该是HTML文本或#id/.className等节点选择器
- label：滑块标题文本，选填属性，可在回调或创建分页时使用。
- poster：滑块封面图地址，选填属性，可在回调或创建分页时使用。
- callback：回调函数，支持两个参数即返回的数据（异步）和自身对象，可通过改参数自定义滑块内容
从多个图片地址字符串获取数据
从节点数组获取数据
从图片地址数组获取数据
从异步json获取数据
从异步sql获取数据
从文本类型数组获取数据
从url类型数组获取数据
从文本类型（从节点取得HTML）获取数据
-
<h5>从多个图片地址字符串获取数据</h5> <div class="ax-slider axis-x" id="type01"></div> <div class="ax-break"></div> <h5>从节点数组获取数据</h5> <div class="ax-slider axis-x" id="type02"></div> <div style="display: none;" id="doms"> <div>滑块1</div> <div>滑块2</div> <div>滑块3</div> <div>滑块4</div> </div> <div class="ax-break"></div> <h5>从图片地址数组获取数据</h5> <div class="ax-slider axis-x" id="type03"></div> <div class="ax-break"></div> <h5>从异步json获取数据</h5> <div class="ax-slider axis-x" id="type04"></div> <div class="ax-break"></div> <h5>从异步sql获取数据</h5> <div class="ax-slider axis-x" id="type08"></div> <div class="ax-break"></div> <h5>从文本类型数组获取数据</h5> <div class="ax-slider axis-x" id="type05"></div> <div class="ax-break"></div> <h5>从url类型数组获取数据</h5> <div class="ax-slider axis-x" id="type06"></div> <div class="ax-break"></div> <h5>从文本类型（从节点取得HTML）获取数据</h5> <div class="ax-slider axis-x" id="type07"></div> <div style="display: none;" id="slide01">滑块1</div> <div style="display: none;" id="slide02">滑块2</div> <div style="display: none;" id="slide03">滑块3</div> <div style="display: none;" id="slide04">滑块4</div> -
new axSlider('#type01', { navigation:true, content: 'examples/images/china01.jpg,examples/images/china02.jpg,examples/images/china03.jpg,examples/images/china04.jpg', }); let doms = [...document.querySelector('#doms').children]; new axSlider('#type02', { navigation:true, content: doms, }); let strs = ['examples/images/china01.jpg', 'examples/images/china02.jpg', 'examples/images/china03.jpg', 'examples/images/china04.jpg']; new axSlider('#type03', { navigation:true, content: strs, }); new axSlider('#type04', { navigation:true, content: 'ajax/china.json', async: true, }); new axSlider('#type08', { navigation: true, content: 'ajax/chinaSql.php', async: { enable:true, source:'sql', }, }); new axSlider('#type05', { navigation:true, content: [ { type: 'text', content: '内容1', }, { type: 'text', content: '内容2', }, { type: 'text', content: '内容3', }, { type: 'text', content: '内容4', }, ] }); new axSlider('#type06', { navigation:true, content: [ { content: 'https://www.axui.cn/', active: true, type: 'url', }, { content: 'https://www.axui.cn/v2.0/ax-index.php', type: 'url', }, { content: 'https://www.axui.cn/demo.php', type: 'url', }, ], }); new axSlider('#type07', { navigation: true, content: [ { type: 'text', content: '#slide01', }, { type: 'text', content: '#slide02', }, { type: 'text', content: '#slide03', }, { type: 'text', content: '#slide04', }, ] }); -
[ { "label": "自然环境", "content": "中国位于亚洲东部，太平洋西岸。北起漠河附近的黑龙江江心，南到南沙群岛的曾母暗沙。西起帕米尔高原，东至黑龙江、乌苏里江汇合处。陆地面积960万平方千米，陆上边界2万多千米。" }, { "label": "行政区划", "content": "截至2020年底，中国共有34个省级行政区（包括23个省、5个自治区、4个直辖市、2个特别行政区）、333个地级行政区、2844个县级行政区、38741个乡级行政区。北京是中国的首都。" }, { "label": "人口", "content": "全国总人口为1443497378人，其中：普查登记的大陆31个省、自治区、直辖市和现役军人的人口共1411778724人；香港特别行政区人口为7474200人；澳门特别行政区人口为683218人；台湾地区人口为23561236人。" }, { "label": "饮食", "content": "经过千年的发展独自形成了中国饮食文化，中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中国人民在生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。" } ]
混合数据
以上讲解数据源的示例均是存粹的单一类型，本插件是支持混合数据的，混合数据的构成类似：[{type:'image',content:''},{type:'url',content:''},{type:'async',content:''},...]。
对于type:'async'的滑块获取的数据可能是从json文件或sql文件得到数组数据，数组数据是不能作为HTML文本自动添加到滑块中的；如果使用了懒加载，所以需要使用lazyload.onAsync监听回调，手动创建滑块内容，详细可查看axLazyload的用法。
获取异步数据，如果需要指定参数，那么数据对象可以使用data属性，即类似[{type:'async',content:'xxx/xxx.php',data:{limit:4}},...]
从同步数组获取混合数据
从异步json获取混合数据
异步获取数据，手动添加内容
-
<h5>从同步数组获取混合数据</h5> <div class="ax-slider axis-x" id="mix01"></div> <div class="ax-break"></div> <h5>从异步json获取混合数据</h5> <div class="ax-slider axis-x" id="mix02"></div> <div style="display:none" id="dom05">从节点获得HTML</div> <div class="ax-break"></div> <h5>异步获取数据，手动添加内容</h5> <div class="ax-slider axis-x" id="mix03"></div> -
new axSlider('#mix01', { navigation: true, content: [ { label: '文本标题', content: '文本内容', }, { label: '从DOM获取HTML', content: '#slide02', }, { label: 'iframe网页', content: 'https://www.axui.cn/', type: 'url', }, { label: '异步页面内容', content: 'ajax/world.html#China', type: 'async', }, { label: '异步sql内容', content: 'ajax/chinaSql.php', type: 'async', data: { limit: 2 } }, ], lazyShow:true, lazyload: { onAsync: (data) => { data.dom.innerHTML = ''; data.response.forEach(k => { data.dom.innerHTML += k.content; }); } } }); new axSlider('#mix02', { navigation: true, lazyShow:true, content: 'ajax/tabAsync.json', async: true, }); new axSlider('#mix03', { navigation: true, content: 'ajax/chinaSql.php', lazyShow:true, async: { enable: true, source: 'sql', data: { limit: 3 } }, }); -
[ { "label": "自然环境", "content": "中国位于亚洲东部，太平洋西岸。北起漠河附近的黑龙江江心，南到南沙群岛的曾母暗沙。西起帕米尔高原，东至黑龙江、乌苏里江汇合处。陆地面积960万平方千米，陆上边界2万多千米。" }, { "label": "行政区划", "content": "截至2020年底，中国共有34个省级行政区（包括23个省、5个自治区、4个直辖市、2个特别行政区）、333个地级行政区、2844个县级行政区、38741个乡级行政区。北京是中国的首都。" }, { "label": "人口", "content": "全国总人口为1443497378人，其中：普查登记的大陆31个省、自治区、直辖市和现役军人的人口共1411778724人；香港特别行政区人口为7474200人；澳门特别行政区人口为683218人；台湾地区人口为23561236人。" }, { "label": "饮食", "content": "经过千年的发展独自形成了中国饮食文化，中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中国人民在生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。" } ] -
<?php header("Content-Type:text/plain;charset=utf-8"); //连接数据库，数据库用户自己定义 $server="数据库地址"; $username="数据库用户名"; $password="数据库密码"; $database="数据库名"; $table = '表名'; $connect = mysql_connect($server,$username,$password) or die("数据库链接错误"); mysql_select_db($database,$connect); mysql_query("set names 'utf8'"); $limit = !empty($_POST[limit])?' limit '.$_POST[limit]:''; //检索最终数据 $sqlString="select * from {$table} $limit"; $sql=mysql_query($sqlString); //根据数据生成对象数组 $result = array(); while ($row = mysql_fetch_object($sql)){ array_push($result,$row); } $success = json_encode($result); echo $success; ?>
异步请求sql的数据库文件请点击这里下载。
自动高度
针对横向滚动（axis:'x'）的情况，默认外容器是固定高度的，高度有css控制；如果希望外容器高度随着滑块高度变化而变化可设置参数autoHeight:auto以实现这个要求。
-
<div class="ax-slider axis-x" axSlider="autoHeight:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01" style="height:200px;">slide01</li> <li class="even s02" style="height:260px;">slide02</li> <li class="odd s03">slide03</li> <li class="even s04" style="height:320px;">slide04</li> <li class="odd s05" style="height:360px;">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08" style="height:200px;">slide08</li> <li class="odd s09">slide09</li> <li class="even s10" style="height:180px;">slide10</li> <li class="odd s11">slide11</li> <li class="even s12" style="height:240px;">slide12</li> <li class="odd s13">slide13</li> <li class="even s14" style="height:280px;">slide14</li> <li class="odd s15">slide15</li> <li class="even s16" style="height:360px;">slide16</li> <li class="odd s17">slide17</li> <li class="even s18" style="height:340px;">slide18</li> </ul> </div> -
<同上>
滑块数量
外容器默认显示1个滑块，可通过参数slides来控制显示数量，参数写法如下：
- 填写一个大于0的数字，1表示显示一个滑块，3表示显示三个滑块；该写法下所有的滑块会被赋予相同的宽度值（=外容器宽度值/slides）。
- 填写字符串“auto”，表示不对滑块设置宽度（宽度值由css或内容控制），让滑块如正文内容一样可自由滚动。
-
<div class="ax-slider axis-x" axSlider="slides:2"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:'auto',navigation:true,pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
滑块间隙
对于slides>0即窗口显示多个滑块的情况，可使用gap参数设置滑块间的间隙。默认gap为0，如果需要可设置一个正整数，单位px。
-
<div class="ax-slider axis-x" axSlider="slides:3,gap:20,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-y" axSlider="scroll:{axis:'y'},slides:3,gap:20,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
无限循环
通过设置参数loop:true让滑块实现前后无限滚动。
如果slides设为auto，那么需要确保滑块加起来的尺寸要大于外容器尺寸，否则视觉上会有顿挫感。
为了避免最后一个和第一个滑块衔接顿挫，所以其实例的scroll.inertable参数被强制设定为false，即动画完成之后才能进行下一次拖拽或滚轮事件，视觉表现上为动画滞后。
-
<div class="ax-slider axis-x" axSlider="loop:true,navigation:true,pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:2,loop:true,navigation:true,pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:3,loop:true,navigation:true,pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:'auto',loop:true,navigation:true,pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
滑块居中
滑块默认在起始位置吸附（最左或最上），可通过scroll.paddingStart参数来改变滚动吸附的位置。但是通常情况下不需要对此进行设置，比较有用的是让滑块居中吸附，也就是设置参数centered:true即可。
-
<div class="ax-slider axis-x" axSlider="slides:3,centered:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:4,centered:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
滑块居中后可能会在起始部分产生空挡，或许不太美观，可使用参数centeredFill:true来修复该空挡。是否有空挡与active参数有关，如果slides:3，而active:1或>1，那么不会有空挡，centeredFill将无意义。
-
<div class="ax-slider axis-x" axSlider="slides:3,centered:true,centeredFill:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:4,centered:true,centeredFill:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
即使使用了centeredFill:true来修复该空挡，实际上用户左右滑到底依然会拖出空挡，可设置参数loop:true模拟无限循环。
-
<div class="ax-slider axis-x" axSlider="slides:3,centered:true,centeredFill:true,loop:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:4,centered:true,centeredFill:true,loop:true,navigation:{enable:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
自动滚动
滑块默认不会自动滚动，可通过参数autoplay设置自动轮播滚动，该参数是一个对象，属性如下：
- enable：是否启用，默认false不启用，可选择true启用。
- delay：延时多久进入下一个滑块，默认4000，单位ms
- countdown：是否使用倒计时进度条，默认false不使用，可选择true使用
参数可简化写为autoplay:false/true。
在自动滚动情况下，如果操作导航，分页或拖拽了滑块将停止自动滚动则转为手动滚动方式。
-
<div class="ax-slider axis-x" axSlider="autoplay:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="slides:2,autoplay:{enable:true,countdown:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
垂直滚动
默认默认是水平滚动的，如果需要垂直滚动请设置参数scroll.axis:'y'。
-
<div class="ax-slider axis-y" axSlider="scroll:{axis:'y'}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> </ul> </div> -
<同上>
网格布局
默认是单行或单列布局，如果需要多行或多列布局请使用divide参数，该参数默认为1，需要多行或多列请设置一个大于1的正整数。
-
<div class="ax-slider axis-x" axSlider="divide:3,gap:20,slides:2"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-y" axSlider="scroll:{axis:'y'},divide:3,gap:20,slides:2"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
使用键盘控制
参数keyboard可设置是否允许使用方向键控制滚动，该参数默认false即禁止，可设为true开启。
开启后可对滑块使用“左”和“右”方向键控制。按左键表示向前滚动，按右键表示向后滚动。由于“上”和“下”按键会导致页面滚动，所以没有将其作为控制按钮。
能使用键盘控制滚动的前置条件是，外容器完全暴露在浏览器中。
-
<div class="ax-slider axis-x" axSlider="keyboard:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-y" axSlider="scroll:{axis:'y'},keyboard:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> -
<同上>
分页和导航风格
参数pagination下的className可给分页节点追加class类以自定义分页样式风格。
参数navigation下的className可给前后导航节点追加class类以自定义前后导航样式风格；另外可使用navigation.filled:true设定实体导航按钮。
-
<div class="ax-slider axis-x" axSlider="navigation:{enable:true,filled:true}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="navigation:{enable:true,className:'mynavi'},pagination:{className:'mypagi'}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
组合分页和导航
分页和导航节点默认是分开的，如果需要将两者组合在一起有两个方法：
- 1、将
ax-slider-navigation节点放在容器里面。 - 2、设置参数
integrated:true。
-
<div class="ax-slider axis-x" axSlider="navigation:{enable:true,filled:true},pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> <div class="ax-slider-navigation"></div> </div> <div class="ax-break"></div> <div class="ax-slider axis-y" axSlider="scroll:{axis:'y'},navigation:true,pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> </ul> <div class="ax-slider-navigation"></div> </div> -
<同上>
分页和导航位置
分页和导航默认是置于容器内部，但是可通过pagination.seletor、navigation.prev.selector和navigation.next.selector节点选择器将分页和导航放到页面任意位置。
left
right
-
<div class="ax-slider axis-x" axSlider="pagination:{enable:true,selector:'#pagiST'},navigation:{enable:true,prev:{selector:'#prevST'},next:{selector:'#nextST'}}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <i class="ax-slider-prev" id="prevST">left</i> <i class="ax-slider-next" id="nextST">right</i> <div class="ax-slider-pagination" id="pagiST"></div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="pagination:{enable:true,selector:'#pagiST2'},navigation:{prev:{enable:true,selector:'#prevST2'},next:{selector:'#nextST2'}}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-slider-navigation"> <i class="ax-slider-prev" id="prevST2">left</i> <div class="ax-slider-pagination" id="pagiST2"></div> <i class="ax-slider-next" id="nextST2">right</i> </div> -
<同上>
使用总计
默认不显示滑块分页总计，可通过total:true或total.enable:true设置来显示总计。
总计节点默认位置是在容器的左上角，可通过total.placement参数来改变位置，支持四个位置：left-top、right-top、right-top和right-bottom。
-
<div class="ax-slider axis-x" axSlider="pagination:{enable:true,selector:'#pagiST'},navigation:{enable:true,prev:{selector:'#prevST'},next:{selector:'#nextST'}}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <i class="ax-slider-prev" id="prevST">left</i> <i class="ax-slider-next" id="nextST">right</i> <div class="ax-slider-pagination" id="pagiST"></div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="pagination:{enable:true,selector:'#pagiST2'},navigation:{prev:{enable:true,selector:'#prevST2'},next:{selector:'#nextST2'}}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-slider-navigation"> <i class="ax-slider-prev" id="prevST2">left</i> <div class="ax-slider-pagination" id="pagiST2"></div> <i class="ax-slider-next" id="nextST2">right</i> </div> -
<同上>
分页风格
通过参数pagination.type设置分页风格，支持四种分页风格，分别是lamp小点指示灯，thumb缩略图，index索引指示灯和text文本标题。
使用thumb和text分页风格，需要有缩略图或标题，那么缩略图和标题的数据来源有两个地方：
- 1、如果实例是以content数据创建，那么数据中有poster属性或label属性，thumb和text风格将从中取值
- 2、如果数据中午poster属性或label属性，那么将从pagination.data对应的索引中取值
分页风格默认是指示灯，以下演示其他三种分页风格。
-
<div class="ax-slider axis-x" axSlider="pagination:{enable:true,type:'thumb',data:['<?=$public?>images/china01-sm.jpg','<?=$public?>images/china02-sm.jpg','<?=$public?>images/china03-sm.jpg','<?=$public?>images/china04-sm.jpg']}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="pagination:{enable:true,type:'index'}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="pagination:{enable:true,type:'text',data:['广东','湖南','河北','上海']}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> -
<同上>
自定义分页
除了使用几个固定风格的分页形式，可通过回调函数自定义分页风格；pagination.callback默认为空，自定义分页风格则需启用该回调函数，回调函数支持一个参数，该参数为一个对象，其属性如下：
- index：当前页索引
- total：总页面数量
- parent：分页父节点
- data：当前索引对应的对象，该对象来自this.bullets，data.dom指分页子项节点，data.target指对应的滑块对象
-
<div class="ax-slider axis-x" id="customPages"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> -
new axSlider('#customPages', { pagination: { enable: true, type: null, callback: (param) => { let text = ''; if (param.index < param.total - 1) { text = '——' } param.data.dom.innerHTML = `${param.index}/${param.total}${text}`; } } }); -
<同上>
以Tab作为分页器
前方演示了将pagination节点放在容器之外的做法，那么同理我们可以将tab组件作为滑块的分页。通过pagination.selector参数获得分页节点，其下的子节点将作为分页子项。
容器之外其他任意节点都可以传入pagination.selector作为分页器节点。
-
<span class="ax-btn-group" id="tabHeader"><a href="###" class="ax-btn">读书</a><a href="###" class="ax-btn">看报</a><a href="###" class="ax-btn">玩手机</a><a href="###" class="ax-btn">旅行</a></span> <div class="ax-break"></div> <div class="ax-slider axis-x" axSlider="pagination:{enable:true,selector:'#tabHeader'}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> -
<同上>
与Panel结合
与panel结合使用是比较常见的场景，唯一要特别处理的便是将分页器移到滑块容器外围并使用selector参数指向对应的容器节点。
关于中国
-
<div class="ax-panel" axPanel="arrow:{enable:false}"> <div class="ax-panel-header"> <div caption><i label>关于中国</i></div> <div class="ax-slider-navigation"> <i class="ax-slider-prev" id="naviPrev">left</i> <span class="ax-slider-pagination" id="pagiOuter"></span> <i class="ax-slider-next" id="naviNext">right</i> </div> </div> <hr/> <div class="ax-panel-body"> <div class="ax-slider axis-x" axSlider="navigation:{enable:true,prev:{selector:'#naviPrev'},next:{selector:'#naviNext'}},pagination:{enable:true,selector:'#pagiOuter'}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> </div> </div> -
<无> -
<同上>
与Accordion结合
与accordion结合使用是比较常见的场景，将slider节点置入ax-accordion-content容器中即可。
-
住在北京
-
吃在成都
-
<ul class="ax-accordion ax-border" axAccordion> <li> <div class="ax-accordion-header"> <div flex><i label>住在北京</i></div> <i class="ax-iconfont ax-icon-up" arrow></i> </div> <hr /> <div class="ax-accordion-body"> <div class="ax-accordion-content"> <div class="ax-slider axis-x" axSlider> <ul class="ax-slider-wrapper"> <li class="odd s01">slide11</li> <li class="even s02">slide12</li> <li class="odd s03">slide13</li> <li class="even s04">slide14</li> </ul> </div> </div> <hr /> </div> </li> <li> <div class="ax-accordion-header"> <div flex><i label>吃在成都</i></div> <i class="ax-iconfont ax-icon-up" arrow></i> </div> <hr /> <div class="ax-accordion-body"> <div class="ax-accordion-content"> <div class="ax-slider axis-x" axSlider> <ul class="ax-slider-wrapper"> <li class="odd s01">slide21</li> <li class="even s02">slide22</li> <li class="odd s03">slide23</li> <li class="even s04">slide24</li> </ul> </div> </div> </div> </li> </ul> -
<无> -
<同上>
与Dialog结合
与dialog结合使用是比较常见的场景，将ax-slider整个节点作为参数写入dialog的content中即可。
-
<button class="ax-btn ax-primary" axDialog="content:document.querySelector('#diaSlider')">打开窗口</button> <div class="ax-slider axis-x" axSlider id="diaSlider"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> -
<无> -
<同上>
与Tab结合
与tab结合使用是比较常见的场景，将ax-slider整个节点置入ax-tab-body的li中即可。
- 北京
- 天津
-
<div class="ax-tab" axTab> <ul class="ax-lamp-group ax-tab-header"> <li>北京</li> <li>天津</li> </ul> <ul class="ax-tab-body"> <li> <div class="ax-slider axis-x" axSlider> <ul class="ax-slider-wrapper"> <li class="odd s01">slide11</li> <li class="even s02">slide12</li> <li class="odd s03">slide13</li> <li class="even s04">slide14</li> </ul> </div> </li> <li> <div class="ax-slider axis-x" axSlider> <ul class="ax-slider-wrapper"> <li class="odd s01">slide21</li> <li class="even s02">slide22</li> <li class="odd s03">slide23</li> <li class="even s04">slide24</li> </ul> </div> </li> </ul> </div> -
<无> -
<同上>
嵌套
支持滑块嵌套使用，允许将父滑块作为子滑块的容器。如果父滑块是通过content参数创建的，那么可在onInit参数（初始化回调）中创建子滑块。
父子使用axSlider属性创建实例
父子使用js创建实例
父子实例均是横向滚动
父子实例均是纵向滚动
回调中创建子滑块
-
<h5>父子使用axSlider属性创建实例</h5> <div class="ax-slider axis-x" axSlider="pagination:true"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02"> <div class="ax-slider axis-y" axSlider="scroll:{axis:'y'},pagination:true,slides:2"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> </li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> <div class="ax-break"></div> <h5>父子使用js创建实例</h5> <div class="ax-slider axis-x" id="nestParent"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02"> <div class="ax-slider axis-y" id="nestChild"> <ul class="ax-slider-wrapper"> <li class="odd s01">子slide01</li> <li class="even s02">子slide02</li> <li class="odd s03">子slide03</li> <li class="even s04">子slide04</li> </ul> </div> </li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> <div class="ax-break"></div> <h5>父子实例均是横向滚动</h5> <div class="ax-slider axis-x" id="nestParent2"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02"> <div class="ax-slider axis-x" id="nestChild2"> <ul class="ax-slider-wrapper"> <li class="odd s01">子slide01</li> <li class="even s02">子slide02</li> <li class="odd s03">子slide03</li> <li class="even s04">子slide04</li> </ul> </div> </li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> <div class="ax-break"></div> <h5>父子实例均是纵向滚动</h5> <div class="ax-slider axis-y" id="nestParent3"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02"> <div class="ax-slider axis-y" id="nestChild3"> <ul class="ax-slider-wrapper"> <li class="odd s01">子slide01</li> <li class="even s02">子slide02</li> <li class="odd s03">子slide03</li> <li class="even s04">子slide04</li> </ul> </div> </li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> <div class="ax-break"></div> <h5>回调中创建子滑块</h5> <div class="ax-slider axis-x" id="nestParent4"></div> -
new axSlider('#nestParent', { pagination: true, }); new axSlider('#nestChild', { scroll: { axis: 'y', }, slides: 2, pagination: true }); new axSlider('#nestParent2', { pagination: true, }); new axSlider('#nestChild2', { slides: 2, }); new axSlider('#nestParent3', { scroll: { axis: 'y', }, pagination: true, }); new axSlider('#nestChild3', { scroll: { axis: 'y', }, slides: 2, }); new axSlider('#nestParent4', { content: [ { type: 'text', content: 'slide01' }, { type: 'text', content: '' }, { type: 'text', content: 'slide03' }, { type: 'text', content: 'slide04' }, ], pagination: true, onInit: function () { //可使用实例内部变量，this.slides是指父滑块数组，先创建ax-slider节点，再追加到父滑块当中 let target = axAddElem('div', { class: 'ax-slider axis-x' }); this.slides[1].dom.appendChild(target); new axSlider(target, { slides: 2, content: [ { type: 'text', content: '子slide01' }, { type: 'text', content: '子slide02' }, { type: 'text', content: '子slide03' }, { type: 'text', content: '子slide04' }, ], }); } }); -
<同上>
不可拖拽
滑块实例中分页器和导航器是不可以拖拽滑动的；如果滑块中的内容比较复杂，并不希望这个滑块内部可拖拽滑动，那么可使用scroll.unbound.selector参数，该参数同axScroll的unbound.selector参数。
该参数可填#id、.className、nodeName（大写）选择器或传入节点。
-
<div class="ax-slider axis-x" axSlider="scroll:{unbound:{selector:'mark'}}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01<mark>此处不可拖拽滑动，可复制</mark></li> <li class="even s02">slide02<mark>此处不可拖拽滑动，可复制</mark></li> <li class="odd s03">slide03<mark>此处不可拖拽滑动，可复制</mark></li> <li class="even s04">slide04<mark>此处不可拖拽滑动，可复制</mark></li> </ul> </div> -
<同上>
断点
使用breakpoints参数实现不同浏览器宽度或不同终端下使用不同的参数。关于断点用法详情点击这里。
-
<div class="ax-slider axis-x" id="breakpoints"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
new axSlider('#breakpoints', { pagination: true, slides: 6, breakpoints: { 'width-1200': { slides: 4 }, 'width-900': { slides: 2 }, 'width-500': { slides: 1 }, } }); -
<同上>
缩放
默认滑块不可双击放大，如果需要设置滑块可缩放则设置参数scale.enable:true或scale:true。
如果需要禁止滑块缩放，可对滑块节点追加unscalable。
参数scale.min设置缩放最小倍数，scale.max设置缩放最大倍数。
双击后将直接缩放到最大倍数，通过滚轮或双指可进行缩放，通过鼠标或单指和拖拽滑动；当拖拽出边界超出阈值则会进入下一个滑块，该阈值可设置参数scaleGap，默认为50，单位px。
-
<div class="ax-slider axis-x" id="scale"> <ul class="ax-slider-wrapper"> <li class="odd s01"><img src="https://src.axui.cn/v2.0/public/images/china01.jpg" /></li> <li class="even s02"> <button type="button" class="ax-btn ax-primary">北京</button> </li> <li class="odd s03"> <button type="button" class="ax-btn ax-primary">上海</button> <button type="button" class="ax-btn ax-primary">广州</button> </li> <li class="even s04" unscalable> <button type="button" class="ax-btn ax-primary">上海（不可缩放和拖拽）</button> </li> <li class="odd s05"><img src="<?=$public?>images/china04.jpg" /></li> </ul> </div> -
new axSlider('#scale', { pagination: true, navigation: true, scale: true, }); -
<同上>
工具
参数tools可给滑块添加按钮工具集，该参数是一个数组，数组每一项的属性如下：
- name：工具名字，需要唯一
- text：按钮的显示文本
- icon：按钮的图标，只能填一个值，如果需要自定义class请使用props属性添加
- action：按钮动作，可以填两种值：
- url：超链接文本，点击按钮直接跳转
- function：函数，函数支持两个参数，当前滑块和按钮对象本身
- props：按钮的其他属性，比如props:{title:''}
- disabled：是否禁用按钮，默认false
如果ax-slider的子元素中没有找到ax-slider-tools节点，那么插件会自动创建节点来存放工具按钮。
-
<div class="ax-slider axis-x" id="tools"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> -
new axSlider('#tools', { pagination: true, navigation: true, tools: [ { name: 'textLink', text: '超链接按钮', action: 'https://www.axui.cn', props: { target: '_blank' } }, { name: 'zoom', icon: 'ax-icon-zoomin', action: (slide, btn) => { alert('当前滑块：' + slide.target.dom.innerHTML) } }, { name: 'download', icon: 'ax-icon-download', action: 'examples/images/china01.jpg', props: { download: '测试图片' } }, { name: 'print', icon: 'ax-icon-printer', action: '###', disabled:true}, ] }); -
<同上>
以滑块作为分页
通过pagination.selector参数可让任意节点的子元素作为分页按钮。该参数支持三种格式：
- 1、节点选择器字符串，#id、.className、nodeName(大写)等选择器。
- 2、其他实例名字符串（参数instanceName），前提是实例名不与节点选择器相同，否则插件会优先以选择器寻找分页器。
- 3、其他实例变量，例如let demo = new axSlider('#xx')中的demo变量。
- 4、页面某节点。
注意1，如果是自定义风格的分页可将pagination.type参数设为null，避免带上插件原有的分页样式。
注意2，如果主滑块使用了grouped:true，那么分页的页码滑块数则需要视情况相应调整。
以实例名作为分页选择器
分组下的分页
-
<div class="ax-slider axis-x" axSlider="slides:6"> <ul class="ax-slider-wrapper" id="slidePages"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-slider axis-x" axSlider="pagination:{enable:true,selector:'#slidePages',type:null}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <h5>以实例名作为分页选择器</h5> <div class="ax-slider axis-x" axSlider="slides:6,insName:'myslider'"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-slider axis-x" axSlider="pagination:{enable:true,selector:'myslider',type:null}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> <div class="ax-break"></div> <h5>分组下的分页</h5> <div class="ax-slider axis-x" axSlider="slides:3,insName:'myslider2'"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> </ul> </div> <div class="ax-slider axis-x" axSlider="slides:2,grouped:true,pagination:{enable:true,selector:'myslider2',type:null}"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> <li class="odd s09">slide09</li> <li class="even s10">slide10</li> <li class="odd s11">slide11</li> <li class="even s12">slide12</li> <li class="odd s13">slide13</li> <li class="even s14">slide14</li> <li class="odd s15">slide15</li> <li class="even s16">slide16</li> <li class="odd s17">slide17</li> <li class="even s18">slide18</li> </ul> </div> -
<同上>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.targetDom：外容器节点（ax-slider）this.wrapperDom：内器节点（ax-slider-wrapper）this.navigationDom：导航节点（ax-slider-navigation）this.prevDom：上一个按钮节点（ax-slider-prev）this.nextDom：下一个按钮节点（ax-slider-next）this.paginationDom：分页节点（ax-slider-pagination）this.pagesIns：分页器slider的实例（pagination.selector为实例名或实例变量时有效）this.toolsDom：工具按钮容器节点（ax-slider-tools）this.countdownDom：倒计时节点this.totalDom：滑块分页统计节点this.numeratorDom：统计节点中的分子节点this.denominatorDom：统计节点中的分母节点this.activeIndex：当前页码this.slideSize：单个滑块的尺寸值（width或height）this.slideSizeDivide：单个滑块的翻转尺寸值（height或width，options.divide>1才有值）this.pause：播放状态，true/falsethis.slides：所有滑块对象数组，每一项都包含dom属性即滑块节点，其数据结构为[{dom:'',image:'',caption:'',text:'',callback:'',scaled:''}...]this.bullets：分页对象数组，每一项属性包括：target（目标滑块）、dom（分页灯泡节点）、index（对应滑块的索引）this.distJitter：抖动距离（按下->移动->松开的距离）this.outerSize：外容器尺寸值（高度或宽度值）this.innerSize：内容器尺寸值（高度或宽度值）this.snaped：当前被吸附的子元素（节点）this.snapeds：可被吸附的子元素（节点数组）this.unsnapeds：不可被吸附的子元素（节点数组）this.unbounds：未绑定事件的子元素（节点数组），这些节点未绑定鼠标和触摸事件，可复制内容
内部操作方法如下：
this.toNext(callback)()：进入下一页，支持回调函数，回调支持一个参数即下一页对象（包含分页、目标滑块、页码等）this.toPrev(callback)()：进入上一页，支持回调函数，回调支持一个参数即上一页对象（包含分页、目标滑块、页码等）this.toStart(callback)()：进入第一页，支持回调函数，回调支持一个参数即第一页对象（包含分页、目标滑块、页码等）this.toEnd(callback)()：进入最后一页，支持回调函数，回调支持一个参数即最后一页对象（包含分页、目标滑块、页码等）this.toBullet(index,opt)：进入指定页面，支持两个参数：- index：如果是数字类型则表示页码索引，如果是对象类型则表示页码对象（来自this.bullets）
- opt：其为一个对象，该对象有before和complete两个属性，表示滑动前和滑动完成后的回调函数，均支持一个参数即页码对象（包含分页、目标滑块、页码等）
this.toZoomin(index, callback)：放大，支持两个参数，参数说明如下：- index：如果是数字类型则表示将要放大的slide索引；如果是节点类型则表示slide节点；如果是对象类型则表示slide对象（来自this.slides）；如果为空则取当前处于acitve状态的滑块
- callback：回调函数，放大后执行，支持一个参数即正在放大的slide对象
this.toZoomout(index, callback)：缩小，支持两个参数，参数说明如下：- index：同toZoomin
- callback：同toZoomin
this.getTotal()：获得滑块统计数据，返回一个对象{snapped:'当前吸附的滑块索引',slides:'总滑块数量',current:'当前页码',pages:'总页码'}this.startPlay(callback)：在启用自动播放情况下（autoplay.enable），使用该方法将启动自动播放，支持回调函数，回调无参数this.stopPlay(clear = false, callback)：在启用自动播放情况下（autoplay.enable），使用该方法将停止播放，支持两个参数：- clear：暂停后是否删除倒计时，默认false
- callback：回调函数回调无参数
this.update(setting, callback)：更新参数，支持两个参数：- setting：具体的参数，写法同options
- callback：回调函数，支持一个参数即setting
this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：- setting：保存的参数，支持两种格式：
- 为空，将保持当前active状态
- 对象格式，比如setting={active:1}
- callback：回调函数，支持一个参数即localstorage值：
-
<div class="ax-slider axis-x" id="method"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> </ul> </div> -
let methodIns = new axSlider('#method', { slides:2, grouped:true, pagination: true, navigation: true, scale: true, autoplay:{ enable:true, countdown:true } }), prevBtn = document.querySelector('#prevBtn'), nextBtn = document.querySelector('#nextBtn'), indexBtn = document.querySelector('#indexBtn'), startBtn = document.querySelector('#startBtn'), endBtn = document.querySelector('#endBtn'), zoominBtn = document.querySelector('#zoominBtn'), zoomoutBtn = document.querySelector('#zoomoutBtn'), slidesBtn = document.querySelector('#slidesBtn'), bulletsBtn = document.querySelector('#bulletsBtn'), totalBtn = document.querySelector('#totalBtn'), activeBtn = document.querySelector('#activeBtn'), playBtn = document.querySelector('#playBtn'), stopBtn = document.querySelector('#stopBtn')); prevBtn.onclick = ()=>{ methodIns.toPrev(); } nextBtn.onclick = ()=>{ methodIns.toNext(); } indexBtn.onclick = ()=>{ methodIns.toBullet(1); } startBtn.onclick = ()=>{ methodIns.toStart(); } endBtn.onclick = ()=>{ methodIns.toEnd((item)=>{ console.log(item) }); } zoominBtn.onclick = ()=>{ methodIns.toZoomin(); } zoomoutBtn.onclick = ()=>{ methodIns.toZoomout(); } slidesBtn.onclick = ()=>{ console.log(methodIns.slides); } bulletsBtn.onclick = ()=>{ console.log(methodIns.bullets); } totalBtn.onclick = ()=>{ console.log(methodIns.getTotal()); } activeBtn.onclick = ()=>{ console.log('当前活动滑块索引：',methodIns.activeIndex); } playBtn.onclick = ()=>{ methodIns.startPlay(); } stopBtn.onclick = ()=>{ methodIns.stopPlay(); } -
<同上>
增加和删除滑块
通过使用add方法增加新滑块。该方法有三个参数：
- data：数据对象，例如{type:'text',content:''}，详细可查看上方“数据源”板块
- placement：添加位置，默认end即内容器末尾，可选值如下：
- 'start'字符串，在头部添加子元素。
- 'end'字符串，在尾部添加子元素。
- 数字：例如2则表示在第三个子元素后面追加新子元素，第一个子元素索引为0。
- #id/.classname/nodename：选择器字符串，从内容器中找到该选择器的子元素并在该节点后面新增新节点。
- 节点：在该节点后面追加新子元素。
- callback：回调函数，支持一个参数即新增加的slide项
通过使用remove方法删除滑块。该方法有两个参数：
- placement：添加位置，默认end即内容器末尾，可选值如下：
- 'start'字符串，删除第一个子元素。
- 'end'字符串，删除最后一个元素。
- 数字：例如2则表示删除索引为2的子元素。
- #id/.classname/nodename：选择器字符串，从内容器中找到该选择器的子元素并删除。
- 节点：直接删除该节点。
- slide对象：为this.slides的一项，插件内部使用。
- callback：回调函数，支持一个参数即删除的slide项
-
<div class="ax-slider axis-x" id="addslide"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> <div class="ax-break"></div> <button class="ax-btn" id="addslideStart">头部增加滑块</button> <button class="ax-btn" id="addslideEnd">尾部增加滑块</button> <button class="ax-btn" id="addslideIndex">第2个滑块后增加新滑块</button> <button class="ax-btn" id="removeslideStart">删除第一个子元素</button> <button class="ax-btn" id="removeslideEnd">删除最后一个子元素</button> <button class="ax-btn" id="removeslideIndex">删除index=2的子元素</button> -
let addslideIns = new axSlider('#addslide', { pagination: true, navigation: true, total:true, }), addslideStart = document.querySelector('#addslideStart'), addslideEnd = document.querySelector('#addslideEnd'), addslideIndex = document.querySelector('#addslideIndex'), removeslideStart = document.querySelector('#removeslideStart'), removeslideEnd = document.querySelector('#removeslideEnd'), removeslideIndex = document.querySelector('#removeslideIndex'); addslideStart.onclick = () => { addslideIns.add({ type: 'text', content: '头部新滑块'+ new Date().valueOf(), },'start'); } addslideEnd.onclick = () => { addslideIns.add({ type: 'text', content: '尾部新滑块'+ new Date().valueOf(), },'end'); } addslideIndex.onclick = () => { addslideIns.add({ type: 'text', content: 'index=2后的新滑块'+ new Date().valueOf(), },2); } removeslideStart.onclick = () => { addslideIns.remove('start'); } removeslideEnd.onclick = () => { addslideIns.remove('end'); } removeslideIndex.onclick = () => { addslideIns.remove(2); }
更新参数
通过使用update方法更新插件参数。该方法有两个参数：
- setting：将要更新的参数，写法同options
- callback：回调函数，支持一个参数即setting，可不填
-
<div class="ax-slider axis-x" id="update"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> <div class="ax-break"></div> <button class="ax-btn" id="updateBtn">更新：自动播放，一屏两个滑块</button> -
let onIns = new axSlider('#on', { pagination: true, navigation: true, scale: true, autoplay: { enable: true, countdown: true } }); onIns.on('slide', (data) => { console.log('开始滑动了：', data); }).on('slided', (data) => { console.log('滑动完成了：', data); }).on('toStart', (data) => { console.log('滑动到头了：', data); }).on('toEnd', (data) => { console.log('滑动到尾了：', data); }).on('startPlay', (data) => { console.log('开始播放了'); }).on('stopPlay', (data) => { console.log('停止播放了'); });
保存数据
因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。
保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。
使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。
-
<div class="ax-slider axis-x" id="save"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> <div class="ax-break"></div> <button class="ax-btn" id="saveBtn">更新并保存：一屏两个滑块</button> -
let saveIns = new axSlider('#save', { storageName:'demo01', pagination: true, navigation: true, }), saveBtn = document.querySelector('#saveBtn'); saveBtn.onclick = () => { saveIns.update({ slides: 2 }); }
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<div class="ax-slider axis-x" id="destroy"> <ul class="ax-slider-wrapper"> <li class="odd s01">slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> <div class="ax-break"></div> <button class="ax-btn" id="destroyBtn">销毁</button> <button class="ax-btn" id="initBtn">初始化</button> -
let destroyIns = new axSlider('#destroy'), destroyBtn = document.querySelector('#destroyBtn'), initBtn = document.querySelector('#initBtn'); destroyBtn.onclick = () => { destroyIns.destroy(()=>{ console.log('销毁了实例'); }); } initBtn.onclick = ()=>{ destroyIns.init(()=>{ console.log('初始化了实例'); }); }
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit/init初始化后执行，无参数onSlide/slide滑动开始前执行，支持一个参数即滑动目标bullet项onSlided/slided滑动完成后执行，支持一个参数即当前bullet项onToEnd/toEnd滑动到最后一个滑块并完成后执行，支持一个参数即当前bullet项onToStart/toStart滑动到第一个滑块并完成后执行，支持一个参数即当前bullet项onStartPlay/startPlay启动自动播放后执行，无参数onStopPlay/stopPlay停止播放后执行，无参数onZoomin/zoomin放大后执行，支持一个参数即当前slide项onZoomout/zoomout缩小后执行，支持一个参数即当前slide项onDestroy/destroy销毁后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<div class="ax-slider axis-x" id="on"> <ul class="ax-slider-wrapper"> <li class="odd s01"><button class="ax-btn ax-primary">北京</button>slide01</li> <li class="even s02">slide02</li> <li class="odd s03">slide03</li> <li class="even s04">slide04</li> <li class="odd s05">slide05</li> <li class="even s06">slide06</li> <li class="odd s07">slide07</li> <li class="even s08">slide08</li> </ul> </div> -
let onIns = new axSlider('#on', { pagination: true, navigation: true, scale: true, autoplay: { enable: true, countdown: true } }); onIns.on('slide', (data) => { console.log('开始滑动了：', data); }).on('slided', (data) => { console.log('滑动完成了：', data); }).on('toStart', (data) => { console.log('滑动到头了：', data); }).on('toEnd', (data) => { console.log('滑动到尾了：', data); }).on('startPlay', (data) => { console.log('开始播放了'); }).on('stopPlay', (data) => { console.log('停止播放了'); });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axSlider('#demo',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
storageName: '',//存储名称，字符串格式；如果需要保存实例当前数据请设定唯一的值，比如：storageName:'mystorage001'
content: '',//传入数据，需使用标准写法:[{thumb:'',image:'',label:'',text:'',callback:''},...]，
//如果需要在分页中显示标题请填label属性
//如果需要在分页中显示缩略图请填thumb属性或image属性
//如果image和text都填写了，那么在滑块中会将image放上方，text放下方
//如果填写callback，那么将需要用户手动添加滑块内容，callback支持一个参数即本项的数据
separator: ',',//如果content为字符串，通过该参数分离出图片地址
async: {
enable: false,//是否启用异步获取数据，默认不启用，可选择true，那么content参数应该填写一个json或动态页面地址
type: 'post',//异步提交的方式，默认post，可填get
source: 'json',//异步数据源，默认json，可选择sql（使用sql数据源，通常需要设置data参数）
data: null,//异步请求传递的数据，默认为空即不向后台传递数据，通常source为sql才需要填写该属性
},
lazyShow: false,//是否开启懒加载，默认false不开启内容会一次性加载完毕；可设为true对内容实施懒加载，避免加载内容过多占用太多内存
lazyload: {
visible: [0.2],//滑块出现在容器中，并且是自身尺寸0.2的时候才加载
dataName: 'src',
onAsync: '',//如果滑块从异步获取数据，数据类型是json，应该使用该监听方法生成滑块内容，详细请参考axLazyload
},//懒加载参数，有axLazyload相同写法
active: 0,//初始化索引，默认为0即第一个滑块
duration: 500,//移动一个滑块的时间，也就是相对移动速度，默认500，单位ms，
throttle: 0,//对点击前后导航操作以及键盘事件使用节流，默认600（稍大于动画时间，确保在动画完成之后触发其他事件），可选择0表示禁用
slides: 1,//窗口每次可显示几个元素，可填一个大于等于1的数值，插件将根据窗口尺寸自动计算元素宽/高以适配，如果填auto插件将按元素默认处理
grouped: false,//是否将窗口的多个元素成组滚动，默认false不成组，可选择true即：当slides>1时，使用导航或滑动将一次性移动多个子元素
loop: false,//是否左右无缝滚动，默认false即不启用，可选择true启用，slides为数字类型才有效
unsnappedAttr: 'unsnapped',//使用分组后会对子元素设置禁止吸附的属性，字符串格式，默认unsnapped
autoHeight: false,//是否让外容器随滑块的高度自动伸缩变化，默认false即不做高度设置随css，可选择true由js控制高度
gap: 0,//滑块间隙，默认0即无间隙，单位px，对slides>0有效
centered: false,//是否让滑块居中，也就是平移吸附点到中间
centeredFill: false,//使用centered参数会在起始部位产生空挡，使用改参数可避免空挡，默认false，可使用true启用，原理是自动修改当前active值
divide: 1,//是否以类似网格形式布局，与slides参数相对，该参数设置行数（列数），参数gap也将生效
keyboard: false,//是否能使用键盘的方向键控制滑动，默认false禁止，可选择true允许
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
autoplay: {
enable: false,
delay: 4000,//进入下一个滑块的延迟时间，默认2000，单位ms，可自定义延迟时间可设定一个正整数
countdown: false,//是否显示倒计时进度条，默认false不显示，可选择true显示
},//是否自动轮播，默认false手动轮播，如果设为true将以delay值自动轮播
scroll: {
axis: 'x',
snap: {
enable: true,
},
drift: {
timeTHR: 200,
}
},//axScroll虚拟滚动的参数，详细请查看：ax-utils-scroll.php
scale: {
enable: false,
min: 1,
max: 3,
},
scaleGap: 50,//缩放状态拖出多少空白进入下一个滑块，默认50，单位px
tools: [], //每一项的属性有：name(默认有download/zoom/close)、text、icon、action(url/function)、props
total: {
enable: false,//是否显示分页统计，默认不显示，可选择true显示
placement: 'left-top',//显示位置，默认在左上角，可选择right-top、left-bottom、right-bottom
},//该参数可按total:false/true设置亦可
pagination: {
enable: false,//是否启用，默认false不启用，可选择true禁用
className: '',//可追加一个或多个class样式，多个用英文逗号或空格分开
type: 'lamp',//导航类型，默认lamp指示灯，可选择thumb缩略图、index带索引的指示灯、text带标题
selector: '',//节点选择器，为空则内部自动创建
data: [],//分页数据
callback: '',//如果填了callback表示手动创建分页器，支持一个参数，其为一个对象，包含属性：index（当前分页）、total（总页数）、target（目标滑块）、parent（分页容器）
},//该参数可按pagination:false/true设置
navigation: {
enable: false,//是否启用，默认false不启用，可选择true禁用
className: '',//可追加一个或多个class样式，多个用英文逗号或空格分开
Filled: false,//是否为色块填充，默认false，可选择true
prev: {
selector: '',//节点选择器
className: '',//可追加一个或多个class样式，多个用英文逗号或空格分开
text: '',//节点的文本（HTML格式）
},
next: {
selector: '',//节点选择器
className: '',//可追加一个或多个class样式，多个用英文逗号或空格分开
text: '',//节点的文本（HTML格式）
},
},//该参数可按navigation:false/true设置
integrated: false,//是否将分页和导航整合在一起作为一个整体出现，默认false，可选择true
onInit: '',//回调函数，初始化后执行，无参数
onSlide: '',//回调函数，滑动开始前执行，支持一个参数即滑动目标bullet项
onSlided: '',//回调函数，滑动完成后执行，支持一个参数即当前bullet项
onStartPlay: '',//回调函数，启动自动播放后执行，无参数
onStopPlay: '',//回调函数，停止播放后执行，无参数
onToStart: '',//回调函数，滑到第一个滑块并完成后执行，支持一个参数即当前bullet项
onToEnd: '',//回调函数，滑到最后一个滑块并完成后执行，支持一个参数即当前bullet项
onZoomin: '',//回调函数，放大后执行，支持一个参数即当前slide项
onZoomout: '',//回调函数，缩小后执行，支持一个参数即当前slide项
onUpdated: '',//回调函数，参数更新后执行，支持一个参数即设置的参数
onDestroy: '',//回调函数，销毁后执行，无参数
onSave: '',//回调函数，保存数据后执行，支持一个参数即localstorage值
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"