本WIKI于2020.07.21由往事仇心创建,2021.12.25正式建组“空桑档案馆”,编辑权限逐步开放,建议各位少主收藏。
目前正在搭建基础框架与美工优化,欢迎翻阅已开放区域,并提出宝贵建议。
“空桑档案馆”搭建组持续招募ing,期待更多能人异士参与食物语WIKI建设。
反馈留言  ·  编辑教程  ·  收藏方法  ·  

全站通知:

模板:SimpleCarousel/文档

来自食物语-档案馆WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

Overview·概述

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

Author·调整作者

一直在作死的千岛酱

源代码

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


切换箭头

Carousel-left-arrow.png
模板: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}}