模板:SimpleCarousel
Overview·概述
- 专注于简单的图像输入。只保留了预选-下一步点击的功能,以及间隔5000的自动播放。
- 代码来源: 如何建立一个旋转木马 @Jay Cruz.
- Carousel 图像默认设置为全宽。建议限制父容器的大小
- 如果你使用SimpleCarousel,不要在你的图像文件名中包含":"或","。
源代码
加载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}}
所有模板列表
参考模板完成初审核,但需要后续编辑优化