Swiper是纯javascript创建的滑动特效插件，针对手机、平板电脑等移动终端。

Swiper可以实现触摸屏聚焦地图、触摸屏Tab切换、触摸屏多地图切换等常见效果。

Swiper开源、免费、稳定、易用、功能强大，是构建移动终端网站的重要选择！

写微信小程序的时候有实现3D轮播地图的效果，可以直接使用微信小程序自带的组件swiper来实现

效果图如下：

1.1.swiper的相关属性

指示器点是否显示小点，可以自行复位圆形点是否连接滑动，即实现无限滚动。上一页边距与上一张图片的距离，下一页边距与下一张图片的距离，自动播放实现自动滚动。这里主要用圆形来实现无限滚动，再加上前后距离，就可以设置图片的层次和透明度，几乎可以实现图片和容器的高度

Wxml文件

！-carousel/index . wxml-swiper class=' imageContainer ' bind change=' handleChange ' previous-margin=' 50 rpx ' next-margin=' 50 rpx '循环自动播放块wx : for=' { { 3 } } ' wx 3360 key=' { { index } } ' swiper-item class=' item ' image class=' item img { { currentIndex==index ' '活动的“:”} }“src=”http :/././image/3 . jpg '/image/swipe-item/block/swipe wxs文件

/* carousel/index . wxss */page { background : # f7f 7 f7f 7；}.image container { width : 100%；高度： 500 rpx；背景技术： # 000；}.项目{ height: 500rpx}.itemImg{ position:绝对值；宽度： 100%；height: 380rpxborder-radius : 15 rpx；z-index : 5；opacity: 0.7top : 13%；}.active { opa city 3360 1；z-index : 10；height: 430rpxtop : 7%；transit : all . 2s ease-in 0s；}JS文件

//carousel/index . js page({ data : { current exx : 0 }，onLoad: function (options) { }，/*这里，中间高亮显示的图片的样式是受控的*/handlechange : function(e){ this。setdata({ current addex : e。细节。当前})}，})摘要

以上是边肖介绍的一个微信小程序，使用swiper组件实现3D轮播。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！