微信小程序原生轮播效果

<!-- Assuming this is your WXML (WeChat Mini Program template) file

<swiper class="card-swiper" :class="{{dotStyle ? 'square-dot' : 'round-dot'}}" indicator-dots="{{true}}" circular="{{true}}"autoplay="{{true}}" interval="{{5000}}" duration="{{500}}" onChange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
  <block wx:for="{{swiperList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
    <swiper-item class="{{cardCur == index ? 'cur' : ''}}">
      <view class="swiper-item">
        <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
        <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"
          wx:if="{{item.type=='video'}}"></video>
      </view>
    </swiper-item>
  </block>
</swiper> -->
<swiper bindchange="cardSwiper" indicator-dots="true" circular="true" 
autoplay="true" interval="5000" duration="500" indicator-color="#8799a3" 
indicator-active-color="#0081ff" class="cardSwiper">
  <block wx:for="{{swiperList}}" wx:key="*this">
    <swiper-item class="{{cardCur==index?'cur':''}}">
      <view class="swiper-view">
        <image src="{{item.url}}"></image>
      </view>
    </swiper-item>
  </block>
</swiper>

.cardSwiper {
    height: 520rpx !important;
  }
   
  swiper-item {
    width: 600rpx !important;
    left: 80rpx;
    box-sizing: border-box;
    padding: 40rpx 0rpx 70rpx;
  }
   
  .swiper-view {
    width: 100%;
    display: block;
    height: 100%;
    border-radius: 10rpx;
    transform: scale(0.9);
    transition: all 0.2s ease-in 0s;
    overflow: hidden;
    border: 1rpx solid #eee;
  }
   
  swiper-item.cur .swiper-view {
    transform: none;
    transition: all 0.2s ease-in 0s;
  }
   
  .swiper-view image {
    display: block;
    width: 480px;
    height: 100%;
    margin: 0;
    border-radius: 10rpx;
    pointer-events: none;
  }

// pages/swiper/swiper.js
Page({
    onShareAppMessage() {
        return {
          title: 'swiper',
          path: 'page/component/pages/swiper/swiper'
        }
      },
  /**
   * 页面的初始数据
   */
  data: {
    cardCur: 0,
    swiperList: [{
      id: 0,
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
    }, {
      id: 1,
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
    }, {
      id: 2,
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
    }, {
      id: 3,
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
    }, {
      id: 4,
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
    }, {
      id: 5,
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
    }, {
      id: 6,
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
    }],


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },
  cardSwiper(e) {
    this.setData({
      cardCur: e.detail.current
    })
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },
  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

实现左边显示

<swiper bindchange="cardSwiper"  circular="true" 
 interval="5000" duration="500" indicator-color="#8799a3" 	previous-margin="1rpx"
indicator-active-color="#0081ff" class="cardSwiper">
  <block wx:for="{{swiperList}}" wx:key="*this">
    <swiper-item class="{{cardCur==index?'cur':''}}">
      <view class="swiper-view">
        <image src="{{item.url}}"></image>
      </view>
    </swiper-item>
  </block>
</swiper>