模板:轮播图/文档

模板:轮播图/文档

作者

迦洛翎

依赖

Widget:Swiper

使用说明

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

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

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

示例2

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

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

示例3

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

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位banner-紫.png

文件:占位banner-红.png

文件:占位banner-黄.png

文件:占位banner-绿.png

文件:占位banner-蓝.png

文件:占位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>
}}

这是红色