文 | 跨屏互联

跨屏互联从事建站十多年，小程序开发多年，分享一些干货，今天不绕弯子。以前写过一篇3D轮播，方法笨拙且代码繁琐，这次发现用小程序自带的swiper就能轻松实现，效果一致还简洁，故记录下来，复制代码就能用，新手也能快速上手。

先说明效果

实现核心：利用swiper的边距设置+CSS缩放过渡，打造前后轮播图缩放层次感，呈现3D视觉效果，无需额外引入组件，原生就能实现。

一、wxml代码（直接复制）

复制代码
<swiper previous-margin='50px'  next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'>
    <swiper-item wx:for='{{imgList}}' wx:key=''>
        <image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src=https://www.kuaping.com/template/default2026/skin/image/nopic.gif>
关键说明（必看）
1. previous-margin 和 next-margin：分别是轮播图的前边距和后边距，用于露出前后轮播图的边缘，是3D层次感的基础，官网有详细说明；
2. swiperChange：swiper的切换事件，用于同步当前轮播图索引；
3. style='height:{{swiperH}}'：动态设置swiper高度，因为swiper默认有固定高度，需适配图片等比缩放；
4. getHeight：图片加载完成后触发，用于获取图片宽高，实现等比缩放，避免图片拉伸变形。
二、wxss代码（核心缩放效果）
复制代码
swiper {
  padding-top: 30px;
}
.le-img {
  width: 100%;
  display: block;
  transform: scale(0.8); 
  transition: all 0.3s ease; 
  border-radius: 6px; 
}
.le-img.le-active {
  transform: scale(1); 
}
复制代码
关键说明
核心是transform: scale()属性，通过非当前轮播图缩放、当前轮播图还原，配合过渡动画，实现3D切换的视觉效果，无需复杂配置。
三、js代码（动态适配+事件绑定）
复制代码
data: {
    swiperH:'',//swiper动态高度
    nowIdx:0,//当前轮播图索引
    imgList:[//图片列表，替换成自己的图片路径即可
        "/public/img/idx-ad.png",
        "/public/img/idx-ad.png",
        "/public/img/idx-ad.png",
    ]
},
//获取图片宽高，设置swiper等比高度
getHeight:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth - 2*50;//屏幕宽度减去两边边距
    var imgh = e.detail.height;//图片原始高度
    var imgw = e.detail.width;//图片原始宽度
    var sH = winWid * imgh / imgw + "px";//计算适配后的swiper高度
    this.setData({
        swiperH: sH
    })
},
//swiper切换，同步当前索引
swiperChange:function(e){
    this.setData({
        nowIdx: e.detail.current
    })
},
复制代码
总结
就这么简单3部分代码，就能用原生swiper实现小程序3D轮播，比之前的复杂方法简洁太多，无需额外依赖。替换imgList里的图片路径，就能直接投入使用，适配各种小程序场景（首页banner、产品展示等）。
避坑提醒：边距（50px）可根据需求调整，图片路径需填写正确，否则无法正常显示；getHeight事件必须绑定，否则swiper高度异常，影响效果。

---END---
欢迎关注【跨屏互联】，了解更多建站、小程序、SEO、GEO等互联网知识。
申明：若有来源错误或者侵犯您的合法权益，您可以通过邮箱与我们取得联系，我们将及时进行处理，邮箱地址：info@kuaping.com
原文链接：https://www.kuaping.com/article/show15202.html

看到这里了，顺便了解下 跨屏互联 建站Saas系统吧
注册地址：http://kuaping.com/business/register.php
市面上已经有不少自建站Saas系统了，为什么还要做跨屏Saas建站系统？这是一个外行不清楚，内行心知肚明的事情，市面上建站系统大多是拖拽式生成，这种做出来的网站代码很乱，对于seo很不好友。从事建站十多年，我见到太多了。


坚守品质，始终采用更利于seo的手写代码开发
我希望打破这个常规，跨屏互联7年自主开发的Saas建站系统，是一个费时费力的事情，我们所有模板都是手写代码开发，虽说是自助建站，但是和定制是一模一样的流程，所以出来的品质也是一模一样。而是自适应终端适配效果非常好。


对其wordpress，好过wordpress
我们是Wordpress十几年的使用者，对于wordpress我们非常熟悉，也非常喜欢，所以开发跨屏Saas建站系统的时候，汲取了来自wordpress的体验和思路。如果你也喜欢wordpress，跨屏互联的Saas建站后台你会感到熟悉。相比于wordpress，它的优势是无需购买服务器部署源码，注册账号就可以拥有前台后台，可以选择模板。


有软著 无风险，和钓鱼CMS建站系统彻底说拜拜
我们申请了软著-计算机软件著作权登记号：2017SR675691，相比于市面上有钓鱼的CMS建站系统，先免费等你下载使用，然后在起诉，选择跨屏互联SAAS建站系统，也省去了侵权风险。
我们的价格幅度从680~4980不等，不同模板不同价格，按工作量定价，让所有人都可以做得起网站，做放心的网站，做优质的网站，做价格透明的网站。