前端开发:实现旋转木马的轮播效果swiper

作为一个开发人员,轮播图这个大家应该在熟悉不过了。市面上也有很多插件可以实现Bootstrap、Layer、Swiper等等。

今天来说一下swiper这个插件实现方法以及实现的效果图,如下:

1、进入swiper官网 https://www.swiper.com.cn/  看到如下页面,选择swiper3

前端开发:实现旋转木马的轮播效果swiper_第1张图片

2、 下载swiper3压缩包,提取swiper.js或swiper.min.js放在项目文件夹里

前端开发:实现旋转木马的轮播效果swiper_第2张图片

 引用如下代码:

 

3、页面中调用swiper的轮播方法如下图:

前端开发:实现旋转木马的轮播效果swiper_第3张图片

4、可以根据项目要求修改代码及样式,效果图如下:

前端开发:实现旋转木马的轮播效果swiper_第4张图片

你可能感兴趣的:(前端开发,前端开发,轮播,Swiper,旋转木马轮播图)