#小程序 分享一个有趣轮播图特效

因为最近在做一个智慧校园i小程序，写到学校概况页面，就想到这个动画，来分享一下

一、先上图：

 

不得不说，放上照片后既视感有点gaoxiao

一、代码部分：

  
    
      
      {{name[index]}}
    
  

.swiper-block {
  height: 400rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
}

.slide-image {
  height: 200rpx;
  width: 150rpx;
  border-radius: 15rpx;
  box-shadow: 15px 15px 30rpx rgba(0, 0, 0, .2);
  margin: 0rpx 30rpx;
  z-index: 1;
}

.slide-detail {
  font-size: 22rpx;
}

  // js部分

data:{   
imgUrls: [
      'https://www.gdou.edu.cn/__local/5/B9/50/3E3114A_9F66.jpg',
      'https://www.gdou.edu.cn/__local/6/66/04/E3137A9F69D_78999847_AD72.jpg',
      'https://www.gdou.edu.cn/__local/C/58/5A/3113F84730D4_23C03E85_AEAD.jpg',
    ],
    name:[
      'XXX',
      'XXX',
      'XXX',
    ],
}