【微信小程序】小程序实现首页轮播图效果

index.wxml

<view class='carousel'> 

  <swiper class='carousel_swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'>

    <block wx:for="{{imgUrls}}" wx:key="key">

      <swiper-item>

        <image class="carouselImg" src='{{item}}'></image>

      </swiper-item>

    </block>

  </swiper>

 </view>

 

index.wxss

.carousel{

  width: 100%;

  background-color: rebeccapurple;

}

.carousel_swiper{

  width: 100%;

  height: 400rpx;

  display: block;

  position: relative;

  background: #f4f4f4;

}

.carouselImg{

  width: 100%;

  height: inherit;

}

 

效果图