网页旋转木马轮播图插件,流畅的过渡效果,适

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" } }); </script> 注意事项: 图片数量要 3+ 图片顺序从中间开始,往右排序 图片尺寸会比原来的缩小0.6倍,原来是180px,页面上会变成 180 * 0.6 = 108px

在线预览地址

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。