[wechat applet] slide effect realization

【 Wechat applet 】 Slide effect realization

        <view style="height: {
        {
        276-headHeight}}px;" class="bgIndex">
            <!-- <image src="/image/bgIndex.jpg" class="bgIndexImg"></image> -->
            <!--  Slide  start -->
            <view class="banner">
                <swiper indicator-dots="{
     {indicator_dots}}" indicator-color="{
     {indicator_color}}" indicator-active-color="{
     {indicator_active_color}}" autoplay="{
     {autoplay}}" interval="{
     {interval}}" circular="{
     {circular}}">
                    <swiper-item>
                        <image src="/image/bgIndex.jpg" class="bgIndexImg"></image>
                    </swiper-item>
                    <swiper-item>
                        <image src="/image/bgIndex.jpg" class="bgIndexImg"></image>
                    </swiper-item>
                    <!-- <swiper-item> <image src="/image/bgIndex.jpg" class="bgIndexImg"></image> </swiper-item> -->
                </swiper>
            </view>
            <!--  Slide  end -->
        </view>

    indicator_dots: true,
    indicator_color: "#ffffff",
    indicator_active_color: "#ff3b3b",
    autoplay: true,
    interval: 3000,
    circular: true,

/*  Set the position of three dots  */
.banner {
    
  width: 100%;
  height: 100%;
}

.banner swiper {
    
  width: 100%;
  height: 100%;
}

.bgIndexImg {
    
    width: 100%;
    height: 100%;
    display: block;
}