swiper 是一个轮播库,基本上解决80%的需求 ,最近需要写的一个3d的横向焦点图 ,可以理解为旋转木马的效果,因为手撸旋转3D太累,所以使用了swiper的库实现了这个简单的效果
需求效果图最终成果
刚开始看到这个效果图,我首先想到的是css,后来果断放弃 ,因为代码太多了 ,懒得写,因此我用到了swiper ,首先我在bootcdn里面下载好的swiper 的 css 和 js 在页面中引入 ,然后我的写好我的轮播图和样式。(swiper官网里面有)。
样式图
自己设置的css
然后在我们的页面可是写,根据官网api自己配置好的 ,记住 var mySwiper = new Swiper是必学的。
轮播js