1 Star 0 Fork 36

西南 / Swiper3d

forked from visitor009 / Swiper3d 
加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

Swiper3d

软件架构

css js

使用说明

效果

介绍

支持pc、移动端

  • pc左右箭头控制
  • 移动端左右滑动

兼容性

ie >= 10 其他主流浏览器都支持

使用文档:

<!-- css -->
<link rel="stylesheet" href="../css/3dSwiper.css">

<!-- html -->
<div class="swiper-container">
	<ul class="swiper-wrap">
      <li><img src=""></li> 
      <li><img src=""></li>
      <li><img src=""></li> 
	</ul>
	<ul class="swiper-dots"></ul>
	<ul class="swiper-navigator">
		<li class="swiper-btn-prev">&lt;</li>
		<li class="swiper-btn-next">&gt;</li>
	</ul>
</div>

<!-- js -->
<script src="../js/3dSwiper.js"></script>
<script>
		new Swiper(".swiper-container",{
			pagination: ".swiper-dots",
			navigator: {
				prev: ".swiper-btn-prev",
				next: ".swiper-btn-next"
			},
			delay: 3000, // 切换的时间 默认2000
			autoPlay: true // 是否自动切换 默认true
		});
</script>

注意事项:

  1. 图片数量要 3+
  2. 图片顺序从中间开始,往右排序
  3. 图片尺寸会比原来的缩小0.6倍,原来是180px,页面上会变成 180 * 0.6 = 108px

在线预览地址

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

网页旋转木马轮播图插件,流畅的过渡效果,适用于pc,移动端。基于原生css、js实现,在线演示: 展开 收起
JavaScript
MulanPSL-1.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/HuYuliu/swiper3d.git
git@gitee.com:HuYuliu/swiper3d.git
HuYuliu
swiper3d
Swiper3d
master

搜索帮助

113223 674803ea 1850385 170725 2838fb2a 1850385