本站内容均由制作人员原创或在作者允许的前提下搬运,禁止读者从本站盗取资料并用于商业用途,铃兰小站是一个由玩家自发组织编写的非盈利wiki,我们希望我们的努力能为玩家们带来便利,而非利益薰心者的顺风车,如有玩家发现违规者,希望您及时告知站长或管理员,让我们一起维护小站的安宁与和平!

全站通知:

模板:Swiper

来自铃兰之剑WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

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

模板

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

简单说明

版本:1.0

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


使用说明

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

示例

{{Swiper
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
}}
轮播图1.png
轮播图2.png
轮播图1.png
轮播图2.png
轮播图1.png

{{Swiper
|翻页=箭头
|分页=否
|效果=fade
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
}}
轮播图1.png
轮播图2.png
轮播图1.png
轮播图2.png
轮播图1.png


{{Swiper
|联动=主图
|自动播放=否
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
}}
{{Swiper
|联动=缩略图
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
|[[File:轮播图2.png]]
|[[File:轮播图1.png]]
}}
轮播图1.png
轮播图2.png
轮播图1.png
轮播图2.png
轮播图1.png
轮播图1.png
轮播图2.png
轮播图1.png
轮播图2.png
轮播图1.png


{{Swiper
|联动=缩略图
|<div>红色</div>
|<div>黄色</div>
}}
{{Swiper
|翻页=箭头
|联动=主图
|效果=creative
|延迟=5000
|额外参数=creativeEffect:{prev:{translate:[0,0,-400],},next:{translate:['100%',0,0]} }
|1=<div style="width:100%;height:100px;background:#e7bfbf;">这是红色</div>
|2=<div style="width:100%;height:100px;background:#e7d4bf;">这是黄色</div>
}}
红色
黄色
这是红色
这是黄色


{{Swiper
|1=<div style="width:100%;height:100px;background:#e7bfbf;">这是红色</div>
}}
这是红色


作者

作者:迦洛翎

依赖

<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>
  • [[轮播图1.png]]
  • [[轮播图2.png]]
  • [[轮播图1.png]]
  • [[轮播图2.png]]
  • [[轮播图1.png]]
{{[[File:轮播图1.png]] }}
{{[[File:轮播图2.png]] }}
{{[[File:轮播图1.png]] }}
{{[[File:轮播图2.png]] }}
{{[[File:轮播图1.png]] }}

更新日志

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