查看“帮助:Swiper”的源代码

{{模板}}__NOTOC__<div class="hide">{{特殊:最近更改/0}}</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
== 简单说明 ==
{{模板|信息|版本|1.0}}
{{模板|信息|说明|轮播展示图片或内容。}}

== 使用说明 ==
<SyntaxHighlight>
{{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]]
}}
</SyntaxHighlight>

== 示例 ==

{{模板|示例|
<esc>
{{Swiper
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
}}
</esc>
}}


{{模板|示例|
<esc>
{{Swiper
|翻页=箭头
|分页=否
|效果=fade
|[[File:占位banner-红.png]]
|[[File:占位banner-黄.png]]
|[[File:占位banner-绿.png]]
|[[File:占位banner-蓝.png]]
|[[File:占位banner-紫.png]]
}}
</esc>
}}


{{模板|示例|
<esc>
{{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]]
}}
</esc>
}}


{{模板|示例|
<esc>
{{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>
}}
</esc>
}}


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


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

</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">

== 作者 ==
{{模板|信息|作者|迦洛翎}}
<div class="hidden-xs">
== 标签 ==
{{模板|信息|标签|模板}}
</div>

== 依赖 ==

{{模板|依赖
|widget:swiper
}}
<div class="hide">
{{模板|依赖
|File:占位banner-红.png
|File:占位banner-黄.png
|File:占位banner-绿.png
|File:占位banner-蓝.png
|File:占位banner-紫.png
}}
</div>
== 更新日志 ==
* 1.0 基本完成
* 1.1 修复移动端点击箭头后出现边框的问题
* 1.2 优化仅有一张图时关闭自动播放
</div>
</div>