模板: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]]
}}

示例

'"`UNIQ--esc-00000003-QINU`"'

\n\{\{Swiper\n\!\(\(File:占位banner-红.png\)\)\n\!\(\(File:占位banner-黄.png\)\)\n\!\(\(File:占位banner-绿.png\)\)\n\!\(\(File:占位banner-蓝.png\)\)\n\!\(\(File:占位banner-紫.png\)\)\n\}\}\n

'"`UNIQ--esc-00000007-QINU`"'

\n\{\{Swiper\n\!翻页\e箭头\n\!分页\e否\n\!效果\efade\n\!\(\(File:占位banner-红.png\)\)\n\!\(\(File:占位banner-黄.png\)\)\n\!\(\(File:占位banner-绿.png\)\)\n\!\(\(File:占位banner-蓝.png\)\)\n\!\(\(File:占位banner-紫.png\)\)\n\}\}\n

'"`UNIQ--esc-0000000B-QINU`"'

\n\{\{Swiper\n\!联动\e主图\n\!自动播放\e否\n\!\(\(File:占位banner-红.png\)\)\n\!\(\(File:占位banner-黄.png\)\)\n\!\(\(File:占位banner-绿.png\)\)\n\!\(\(File:占位banner-蓝.png\)\)\n\!\(\(File:占位banner-紫.png\)\)\n\}\}\n\{\{Swiper\n\!联动\e缩略图\n\!\(\(File:占位banner-红.png\)\)\n\!\(\(File:占位banner-黄.png\)\)\n\!\(\(File:占位banner-绿.png\)\)\n\!\(\(File:占位banner-蓝.png\)\)\n\!\(\(File:占位banner-紫.png\)\)\n\}\}\n

'"`UNIQ--esc-0000000F-QINU`"'

\n\{\{Swiper\n\!联动\e缩略图\n\!\ldiv\g红色\l/div\g\n\!\ldiv\g黄色\l/div\g\n\}\}\n\{\{Swiper\n\!翻页\e箭头\n\!联动\e主图\n\!效果\ecreative\n\!延迟\e5000\n\!额外参数\ecreativeEffect:\{prev:\{translate:\(0,0,-400\),\},next:\{translate:\('100%',0,0\)\}\_\}\n\!1\e\ldiv\_style\e"width:100%;height:100px;background:#e7bfbf;"\g这是红色\l/div\g\n\!2\e\ldiv\_style\e"width:100%;height:100px;background:#e7d4bf;"\g这是黄色\l/div\g\n\}\}\n

'"`UNIQ--esc-00000013-QINU`"'

\n\{\{Swiper\n\!1\e\ldiv\_style\e"width:100%;height:100px;background:#e7bfbf;"\g这是红色\l/div\g\n\}\}\n

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