帮助:Swiper

此模板为一键安装导入，不建议手动修改。

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

模板

在此期间没有符合这些条件的编辑

简单说明

版本：1.0

说明：轮播展示图片或内容。

使用说明

{{Swiper
|翻页=     <!-- 可省略，可选值：箭头 -->
|分页=是   <!-- 可省略，默认值：是，可选值：是/否 -->
|效果=slide <!-- 可省略，默认值：slide，可选值：slide/fade/creative/... -->
|循环=是   <!-- 可省略，默认值：是，可选值：是/否。当仅有一张图时不循环。 -->
|自动播放=是<!-- 可省略，默认值：是，可选值：是/否。当仅有一张图时不自动播放。 -->
|延迟=2500  <!-- 可省略，默认值：2500，为毫秒数 -->
|联动=     <!-- 无联动时可省略，有联动时必填，可选值：主图/缩略图 -->
|额外参数=  <!-- 可省略，仅当有特殊需求时写入 -->
|id=mySwiper<!-- 可省略，为轮播图id -->
|[[File:预置banner1.jpg]]
|[[File:预置banner2.jpg]]
|[[File:预置banner1.jpg]]
|[[File:预置banner2.jpg]]
|[[File:预置banner1.jpg]]
}}

示例

MediaWiki:CodeBlock

作者

作者：迦洛翎

标签

标签：模板

依赖

• widget:swiper

<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> <script> $("a").each(function(){ url=$(this).attr("href"); if(typeof(url)!="undefined"){ key=["game.bilibili.com","space.bilibili.com","wiki.biligame.com","qun.qq.com","ssjj2pve.top","ssjj2.wiki","www.ssjj.cn","game.ssjj.cn","h5.ssjj.cn"]; var status=false; key.forEach(function(k){ status=url.replace(/^.+linkfilter\/\?url=https*:\/\/([^\/]+).*$/ig, "$1").indexOf(k)>=0||status; }); url=status?url.replace(/^.+linkfilter\/\?url=(.+)/g, "$1"):url; $(this).attr("href",url); } }); </script>

• 
• 
• 
• 
• 

基于MsUpload的文件上传

基于MsUpload的文件上传

基于MsUpload的文件上传

基于MsUpload的文件上传

基于MsUpload的文件上传

更新日志

• 1.0 基本完成
• 1.1 修复移动端点击箭头后出现边框的问题
• 1.2 优化仅有一张图时关闭自动播放