超级轮播

MediaWiki:SuperCarousel

MediaWiki:SuperCarousel.css

简介

超级轮播（SuperCarousel），作者：丩卩夂忄

特点

• 支持任意素材参与轮播
• 支持手机滑动切换
• 轻便，可扩展性强
• 可通过 生成器 可视化编辑

更新

ver 1.0.1 2022.08.15

JS：修复了一个重启时可能产生的BUG

ver 1.0.0 2022.08.15

正式发布

注

为了便于观察效果，本页示例将所有的轮播元素加上了外边框和有色背景。

实际使用中可以按照自己的需要，轮播任何你想轮播的内容及样式。

基础

支持代码

JS：MediaWiki:SuperCarousel.js

CSS：MediaWiki:SuperCarousel.css

请不要在意保存时的报错

最简用法

<div class="SuperCarousel" style="width:720px;height:200px">
	<div class="body">
		<div class="item">111111111</div>
		<div class="item">222222222</div>
		<div class="item">333333333</div>
		<div class="item">444444444</div>
	</div>
</div>

111111111

222222222

333333333

444444444

常规用法

<div class="SuperCarousel" style="width:720px;height:200px" data-style="slide" data-direction="r2l" data-gap="10">
	<div class="body">
		<div class="item">111111111</div>
		<div class="item">222222222</div>
		<div class="item">333333333</div>
		<div class="item">444444444</div>
	</div>
	<div class="controller"></div>
</div>

111111111

222222222

333333333

444444444

说明

dom	class="SuperCarousel"	必须。轮播功能的根元素。只要元素拥有这个class，都会自动被功能检索到。
	style="width:720px;height:200px"	必须。设置轮播区域的尺寸。可响应式。
	data-style="slide"	可选。设置切换的样式。默认为"slide"。
		"slide"	滑动。
		"stackIn"	切入。
		"stackOut"	切出。
	data-mode="stack"	可选。设置切换的模式。默认为"stack"。
		"stack"	叠放模式。可以简单理解为最后一张展示完毕后会快速向前翻回第一张，就像一叠纸。
		"loop"	循环模式。可以简单理解为最后一张展示完毕后会像下一张一样切换到第一张，就像一个环。
	data-direction="r2l"	可选。设置切换的方向。默认为"r2l"。
		"r2l"	从右到左。
		"l2r"	从左到右。
		"b2t"	从下到上。
		"t2b"	从上到下。
	data-gap="10"	可选。设置轮播元素自动切换间隔时间。默认为"5"。
		"-1"	特别的，如果设置为"-1"，则不会自动切换。
	data-unit="s"	可选。设置轮播元素自动切换间隔时间的单位。默认为"s"。
		"s"	单位：秒。
		"ms"	单位：毫秒。
	dom	class="body"	必须。存放所有参与轮播的元素。
		dom	class="item"	必须。至少有一个。
	dom	class="controller"	可选。如果设置该元素，则会自动生成一个控制条。
		class="autoHide"	可选。如果设置该class，则控制条在鼠标没有移动到轮播区域时自动隐藏。

样例

设置尺寸

常规

	style="width:200px;height:500px"

111111111

222222222

333333333

444444444

响应式

	style="width:100%;aspect-ratio:720/200"

111111111

222222222

333333333

444444444

设置切换样式

切入

	data-style="stackIn"

111111111

222222222

333333333

444444444

切出

	data-style="stackOut"

111111111

222222222

333333333

444444444

设置切换模式

循环

	data-mode="loop"

111111111

222222222

333333333

444444444

设置切换方向

从左到右

	data-direction="l2r"

111111111

222222222

333333333

444444444

从下到上

	data-direction="b2t"

111111111

222222222

333333333

444444444

从上到下

	data-direction="t2b"

111111111

222222222

333333333

444444444

设置自动切换间隔时间

常规

	data-gap="1"

111111111

222222222

333333333

444444444

设置单位为毫秒

	data-unit="ms"

111111111

222222222

333333333

444444444

不自动切换

	data-gap="-1"

111111111

222222222

333333333

444444444

设置控制条

不显示控制条

	不设置dom class="controller"

111111111

222222222

333333333

444444444

控制条自动隐藏

	class="controller autoHide"

111111111

222222222

333333333

444444444

附加

说明

dom	class="SuperCarousel"
	class="noPause"	可选。如果设置该class，则鼠标悬浮在轮播区域时不会暂停滚动。
	style="--i:0"	可选。设置轮播的起点元素，从0开始记。默认为"0"。
	style="--s:1s"	可选。设置轮播切换动画的持续时间。默认为"1s"。

样例

鼠标悬浮时不暂停

	class="SuperCarousel noPause"

111111111

222222222

333333333

444444444

起点设为第二个元素

	style="width:720px;height:200px;--i:1"

111111111

222222222

333333333

444444444

切换动画长3秒

	style="width:720px;height:200px;--s:3s"

111111111

222222222

333333333

444444444

请不要尝试这些写法（即便它能按照预期实现功能）

<div class="SuperCarousel" style="width:720px;height:400px" data-gap="3">
	<div class="body">
		<div class="item">
			<div class="SuperCarousel" style="width:640px;height:200px" data-direction="l2r" data-gap="1">
				<div class="body">
					<div class="item">555555</div>
					<div class="item">666666</div>
					<div class="item">777777</div>
					<div class="item">888888</div>
				</div>
				<div class="controller"></div>
			</div>
		</div>
		<div class="item">222222222</div>
		<div class="item">333333333</div>
		<div class="item">444444444</div>
	</div>
	<div class="controller"></div>
</div>

555555

666666

777777

888888

222222222

333333333

444444444

补充说明

样例集