原生网页旋转轮播图插件,PC端+移动端——Swiper3d

介绍

Swiper3d是基于原生js和css实现的网页旋转木马轮播图插件,具有流畅的过渡效果,适用于pc和移动端。ie >= 10以及 其他主流浏览器都支持。pc左右箭头控制移动端左右滑动


原生网页旋转轮播图插件,PC端+移动端——Swiper3d

Gitee

https://gitee.com/visitor009/swiper3d

代码示例

<!-- 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"><</li>
<li class="swiper-btn-next">></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

总结

开源的插件非常多,有很多插件都很实用,本文介绍的是这样一个轮播图插件,也是偶然在码云上发现的,希望对你有所帮助!

版权声明:飞鱼 发表于 2020-07-19 11:49:36。
转载请注明:原生网页旋转轮播图插件,PC端+移动端——Swiper3d | HelloWorld.La

暂无评论

暂无评论...