【记录】swiper实现卡片式轮播

利用swiper使用卡片式轮播图

效果图：

原理： 利用css实现的，改了一下样式

源码：

wxml

<swiper class="carousel" circular autoplay interval="{{2000}}" duration="{{800}}" bindchange="swiperChange">
  <swiper-item class="carousel-item">
    <image src="/resources/images/i.jpg" class="{{0===swiperCurrent?'':'noActive'}}"></image>
  </swiper-item>
  <swiper-item class="carousel-item">
    <image src="/resources/images/o.jpg" class="{{1===swiperCurrent?'':'noActive'}}"></image>
  </swiper-item>
  <swiper-item class="carousel-item">
    <image src="/resources/images/t.jpeg" class="{{2===swiperCurrent?'':'noActive'}}"></image>
  </swiper-item>
</swiper>
复制代码

js

// pages/swiperCard/swiperCard.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    swiperCurrent: 0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  swiperChange(e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
})
复制代码

wxss

.carousel {
  position: absolute;
  top: 10%;
  width: 100%;
  height: 340rpx;
  border-radius: 16rpx;
  overflow: hidden;
  
}
.carousel-item {
  width: 60% !important;
  padding: 0;
  left: 20%;
}
  
.carousel-item image{
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
}
.noActive {
  transform: scale(0.8);
}
复制代码