帮助:模板/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]] }}
示例2
{{Swiper |翻页=箭头 |分页=否 |效果=fade |[[File:占位banner-红.png]] |[[File:占位banner-黄.png]] |[[File:占位banner-绿.png]] |[[File:占位banner-蓝.png]] |[[File:占位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]] }}
示例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> }}
{{#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
更新日志
- 1.0 基本完成
- 1.1 修复移动端点击箭头后出现边框的问题
- 1.2 优化仅有一张图时关闭自动播放