轮播图-中间变大左右留出一部分

链接: link.

有用可否赏个赞~~

wxml

<swiper class='swiper' previous-margin="70rpx" next-margin="70rpx" circular='true' bindchange='swiper'>
	<block wx:for="{{list}}" wx:key="" wx:for-item="kf">
		<swiper-item item-id="{{kf.type}}">
			<view class="width_img {{kfindex== index ?'active':''}}">
				<view class='adimg'>
					<image bindtap="adimg" data-id="{{kf}}" src='{{kf.adimg}}'></image>
				</view>
			</view>
		</swiper-item>
	</block>
</swiper>

wxss

.swiper {
  width: 100%;
  height: 300rpx;
  white-space: nowrap;
}

.width_img {
  width: 100%;
  height: 100%;
  display: inline-block;
  transform: scale(0.9);
  transition: all .2s ease 0s;
  border-radius: 4px;
}

.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

.adimg {
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.adimg image {
  width: 100%;
  height: 300rpx;
  border-radius: 5px;
}

js

  


  data: {
    kfindex: 0,
    list: [
      {
        adimg: "../../static/123321.png"
      },
      {
        adimg: "../../static/EYe-sel.png"
      },
      {
        adimg: "../../static/123321.png"
      },
      {
        adimg: "../../static/data-sel.png"
      }
    ],
  },
//轮播index
  swiper: function (e) {
    let that = this;
    console.log(e);
    let index = e.detail.current;
    that.setData({
      kfindex: index
    });
  },
  //广告图片点击处理事件
  adimg: function (e) {
    console.log(e);

  },