模板:SimpleCarousel/文档

Overview·概述

• 专注于简单的图像输入。只保留了预选-下一步点击的功能，以及间隔5000的自动播放。
• 代码来源: 如何建立一个旋转木马 @Jay Cruz.
• Carousel 图像默认设置为全宽。建议限制父容器的大小
• 如果你使用SimpleCarousel，不要在你的图像文件名中包含":"或"，"。

Author·调整作者

一直在作死的千岛酱

+关注

源代码

• Mediawiki: SimpleCarousel.js
• Mediawiki: SimpleCarousel.css

加载Mediawiki:common.js中的两个文件。可能需要一段时间才能生效。 注意：在使用SimpleCarousel的页面中添加{{JS|SimpleCarousel}}也可以，但建议在common.js中加载SimpleCarousel.js。

切换箭头

在模板:SimpleCarousel的源代码中

使用方法

• @param {string} filename1:link,filename2:link,filename3:link，…
  • 用逗号分隔多个图像
  • 链接是可选的。它只允许写入“filename1,filename2，…”

• @param {string} class=类名
  • 这将被应用到所有的图像

举例

{{SimpleCarousel|New-1286-01.png,New-1286-02.png,New-1286-03.png,New-1286-04.png,New-1286-06.png}}

然而，上面的代码仍然是重复的和不可重用的，可以重构如下:

{{#vardefine:CollectionName
|时代
}}{{SimpleCarousel|
{{#loop:c|1|4|{{#ifeq:{{#var:c}}|1||,}}kv_{{#var:CollectionName}}{{#var:c}}.png}}
}}

代码呈现如下:

附加类到所有的图像

// Can define a round-corner class in either {{#css:}}, [[mediawiki:common.css]] or <bstyle/>
.round-corner {border-radius: 8px;}

// When using SimpleCarousel
{{SimpleCarousel|Kv 时代1.png,Kv 时代2.png,Kv 时代3.png,Kv 时代4.png|class=round-corner}}