模板:Swiper

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

简单说明

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

使用说明

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

示例1

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

{{Swiper
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
}}

示例2

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

{{Swiper
|翻页=箭头
|分页=否
|效果=fade
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
}}

示例3

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

{{Swiper
|联动=主图
|自动播放=否
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
}}
{{Swiper
|联动=缩略图
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
}}

示例4

红色

黄色

这是红色

这是黄色

{{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>
}}

示例5

这是红色

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

示例6

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

{{#css:
.coverflow .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

.coverflow .swiper-slide img {
  display: block;
  width: 100%;
}
}}
{{Swiper
|class=coverflow
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
|额外参数=
effect: "coverflow",
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
  rotate: 50,
  stretch: 30,
  depth: 100,
  modifier: 1,
  slideShadows: true,
}
}}

作者

作者：迦洛翎

标签

标签：模板

依赖

• 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> window.onDOMReady = window.onDOMReady || function (callback) { window.safeOperation(() => { const execute = () => window.safeOperation(callback); document.readyState === "loading"  ? document.addEventListener("DOMContentLoaded", execute)  : execute(); }); }; window.safeOperation = window.safeOperation || function (fn, ...args) { try { return typeof fn === 'function' && fn.constructor.name !== 'AsyncFunction'  ? fn(...args)  : null; } catch (e) { console.log(`${fn.name} 执行失败: ${e}`); return null; } }; try { onDOMReady(() => { (window.RLQ = window.RLQ || []).push([["jquery"], function () { 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))); }) }]); }); } catch (e) { } </script>

• 文件:占位banner-红.png
• 文件:占位banner-黄.png
• 文件:占位banner-绿.png
• 文件:占位banner-蓝.png
• 文件:占位banner-紫.png

[[:文件:占位banner-红.png]]

[[:文件:占位banner-黄.png]]

[[:文件:占位banner-绿.png]]

[[:文件:占位banner-蓝.png]]

[[:文件:占位banner-紫.png]]

更新日志

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