小程序轮播

wxml:

<!-- 轮播 -->

<view class="swiper-container">

<swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindanimationfinish="swiperChange" class="swiper">

<block wx:for="{{slider}}" wx:key="unique">

<swiper-item>

<image src="{{item.picUrl}}" class="img"></image>

</swiper-item>

</block>

</swiper>

<view class="dots">

<block wx:for="{{slider}}" wx:key="unique">

<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>

</block>

</view>

</view>

wxss：

/* 轮播图 */

.swiper-container{

position: relative;

}

/* 轮播图效果 */

.swiper-container,.swiper,.swiper-item{

box-shadow:0px 0px 18rpx 0rpx rgba(103,112,134,0.15);

border-radius:15rpx;

}

.swiper-container .swiper{

height: 300rpx;

}

.banner-img{

border-radius:15rpx;

}

.swiper-container .swiper .img{

width: 100%;

height: 100%;

}

.swiper-container .dots{

position: absolute;

left: 0;

right: 0;

bottom: 20rpx;

display: flex;

justify-content: center;

}

.swiper-container .dots .dot{

margin: 0 8rpx;

width: 14rpx;

height: 14rpx;

background: #fff;

border-radius: 8rpx;

transition: all .6s;

}

.swiper-container .dots .dot.active{

width: 24rpx;

background: rgba(119,156,217,1);

}

.category-of-works{

width:124rpx;

height:42rpx;

line-height: 42rpx;

text-align: center;

background:rgba(119,156,217,1);

border-radius:21rpx;

margin-left: 20rpx;

font-size:26rpx;

font-weight:800;

color:rgba(255,255,255,1);

}

js:

data: {

// 轮播

slider: [

{ picUrl: 'http://eventimg.oss-cn-shenzhen.aliyuncs.com/guofeng/guofeng_banner.png' },

{ picUrl: 'https://eventimg.oss-cn-shenzhen.aliyuncs.com/pictures/5c0932f3e33e0.png' },

{ picUrl: 'https://eventimg.oss-cn-shenzhen.aliyuncs.com/pictures/5b7642205b63a.jpg' },

],

swiperCurrent: 0,

},

// 轮播

swiperChange: function (e) {

this.setData({

swiperCurrent: e.detail.current

})

},



},