【記錄】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);
}
複製代碼