|翻页=
|分页=是
|效果=slide
|循环=是
|自动播放=是
|延迟=2500
|联动=
|额外参数=
|id=mySwiper
|[[File:预置banner1.jpg]]
|[[File:预置banner2.jpg]]
|[[File:预置banner1.jpg]]
|[[File:预置banner2.jpg]]
|[[File:预置banner1.jpg]]
'"`UNIQ--esc-00000003-QINU`"'
\n\{\{Swiper\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\}\}\n
'"`UNIQ--esc-00000007-QINU`"'
\n\{\{Swiper\n\!翻页\e箭头\n\!分页\e否\n\!效果\efade\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\}\}\n
'"`UNIQ--esc-0000000B-QINU`"'
\n\{\{Swiper\n\!联动\e主图\n\!自动播放\e否\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\}\}\n\{\{Swiper\n\!联动\e缩略图\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\!\(\(File:预置banner2.jpg\)\)\n\!\(\(File:预置banner1.jpg\)\)\n\}\}\n
'"`UNIQ--esc-0000000F-QINU`"'
\n\{\{Swiper\n\!联动\e缩略图\n\!\ldiv\g红色\l/div\g\n\!\ldiv\g黄色\l/div\g\n\}\}\n\{\{Swiper\n\!翻页\e箭头\n\!联动\e主图\n\!效果\ecreative\n\!延迟\e5000\n\!额外参数\ecreativeEffect:\{prev:\{translate:\(0,0,-400\),\},next:\{translate:\('100%',0,0\)\}\_\}\n\!1\e\ldiv\_style\e"width:100%;height:100px;background:#e7bfbf;"\g这是红色\l/div\g\n\!2\e\ldiv\_style\e"width:100%;height:100px;background:#e7d4bf;"\g这是黄色\l/div\g\n\}\}\n
'"`UNIQ--esc-00000013-QINU`"'
\n\{\{Swiper\n\!1\e\ldiv\_style\e"width:100%;height:100px;background:#e7bfbf;"\g这是红色\l/div\g\n\}\}\n
<link rel="stylesheet" href="//wiki-dev-patch-oss.oss-cn-hangzhou.aliyuncs.com/test/swiper-bundle.css">
<script src="//wiki-dev-patch-oss.oss-cn-hangzhou.aliyuncs.com/test/swiper-bundle.min.js"></script>
<script>
RLQ.push(['jquery', () => {
const swipers = [];
Object.assign(mw.bwiki = mw.bwiki || {}, {swipers: swipers});
$.each($(".bwiki-swiper-thumbs").get().concat($(".bwiki-swiper:not('.bwiki-swiper-thumbs')").get()), function (i, el) {
const attrs = this.attributes;
const options = {};
$.each(attrs, function (i, attr) {
if (attr.nodeName.indexOf("data-swiper-") === -1 || attr.nodeName === "data-swiper-options") return true;
options[attr.nodeName.replace("data-swiper-", "")] = attr.nodeValue;
try {
const optionsTemp = (new Function('el', 'return ' + decodeURIComponent(($(this).attr("data-swiper-options")) || "{}").replace(/\n|\t/g, "").replace(/\+/g, " ")))(el);
$.extend(options, optionsTemp);
} catch (e) {
console.error(e);
console.log("swiper-options", options);
swipers.push(new Swiper($.extend({el:this}, options)));
</script>
[[:文件:预置banner1.jpg]]
[[:文件:预置banner2.jpg]]
[[:文件:预置banner1.jpg]]
[[:文件:预置banner2.jpg]]
[[:文件:预置banner1.jpg]]
-
1.0 基本完成
-
1.1 修复移动端点击箭头后出现边框的问题
-
1.2 优化仅有一张图时关闭自动播放
