KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #ai-agent #developer-tools #claude-code #codex #deepseek-harness #ai-agents #react #mcp #rust

slide3D

★ 36 Open GitHub ↗

slide3D是一个轮番插件，具备触摸滑动，且具有多种切换特效

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# slide3D
slide3D是一个轮番插件，具备触摸滑动，且具有多种切换特效

最新版本：1.2.1

功能更新：

- 新增分页器点击跳转功能
- 新增自动播放功能
- 新增用户操作后是否保留自动播放

调用CSS和JS文件：

```
	<link rel="stylesheet" href="slide3D-1.2.1.min.css" />
	<script src="slide3D-1.2.1.min.js"></script>
```

内容代码：

```
<div class="container3D">
			<div class="wrapper3D">
				<div class="slide3D">
					<img src="image-slider-1.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-2.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-3.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-4.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-5.jpg" alt="" />
				</div>
			</div>
			<div class="slide3D-pagination"></div>  
			<div class="slide3D-prev-button"></div>
			<div class="slide3D-next-button"></div>
		</div>
```

脚本：

```
var mySlide = Slide3D('.container3D', {
				width: 700,   //  宽度
				height:306,   // 高度
				direction: 'horizontal | vertical',  // 定义切换方向，只对slide有效				
				effect: 'fragment',  // flip | turn | slide | flat | fragment   // 切换效果
				sources: ['image-slider-1.jpg','image-slider-2.jpg','image-slider-3.jpg','image-slider-4.jpg','image-slider-5.jpg'],  // 除了effect设为slide外，在其他切换效果的情况下，都需要通过sources给每个slide指定图片。
				box:{
					cols: 3,  // 列
          rows: 6  // 行
				},
				pagination: true,  // 设置分页器
				loop:true,  // 是否循环，只有effect为slide时可以设置，其他效果默认循环
				paginationClickable: true,  //  分页器可点击跳转
    				autoplay: 2000,   // 自动播放时间，单位秒，必须为正整数
    				autoplayDisableOnInteraction : true     // 用户操作后是否不保留自动播放，默认为true，不保留
			});
```

##Bug修复##

- 修复了快速点击前进后退按钮会变成空白的问题

完整实例：

```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="slide3D.css" />
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
			.slide3D img{
				width: 100%;
			}
			.container3D{
				background: #eee;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container3D">
			<div class="wrapper3D">
				<div class="slide3D">
					<img src="image-slider-1.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-2.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-3.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-4.jpg" alt="" />
				</div>
				<div class="slide3D">
					<img src="image-slider-5.jpg" alt="" />
				</div>
			</div>
			<div class="slide3D-pagination"></div>
			<div class="slide3D-prev-button"></div>
			<div class="slide3D-next-button"></div>
		</div>
		<script src="slide3D.js"></script>
		<script>
			var mySlide = Slide3D('.container3D', {
				width: 700,
				height:306,
				effect: 'fragment',  // flip | turn | slide | flat | fragment
				sources: ['image-slider-1.jpg','image-slider-2.jpg','image-slider-3.jpg','image-slider-4.jpg','image-slider-5.jpg'],
				box:{
					cols: 3
				},
				pagination: true,
				loop:true
			});
		</script>
	</body>
</html>
```

slide3D

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README