定製卡牌式 banner

• HTML

<template>
     <view >
        <swiper class='swiperClass' autoplay  interval="2000" 
                duration="1000" previous-margin="60px" next-margin="60px" circular @change="onSwiperChange">
                <!-- indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots -->
           <block v-for="(banner,index) in bannerUrls">
             <swiper-item class="swiperItem" >
               <image :src="banner.imgUrl" class="slide-image" :class="[swiperIndex == index ? 'active' : 'quiet']" ></image>
             </swiper-item>
           </block>
        </swiper>
        
        <view class="bottomLine">
            <view v-for="(item,index) in bannerUrls" class="point" :style="{backgroundColor:swiperIndex==index ? '#FF2F2F' : '#C4C8CC'}"></view>
        </view>
        
    </view>
</template>

• JS

<script>
    
export default {
    data() {
        return {
             // 輪播
            bannerUrls: [
                {
                    imgUrl: '/static/img/banner/banner1.jpeg',
                },
                {
                    imgUrl: '/static/img/banner/banner2.jpeg',
                },
                {
                    imgUrl: '/static/img/banner/banner3.jpeg',
                },
                {
                    imgUrl: '/static/img/banner/banner4.jpeg',
                },
                {
                    imgUrl: '/static/img/banner/banner5.jpeg',
                },
            ],
            
            swiperIndex:0,
        };
    },
    
    methods: {
        onSwiperChange: function(e){
            this.swiperIndex = e.detail.current;
        },
    }
};
</script>

• CSS

.swiperClass {
       width: 750upx;height: 500px;
       margin-top: 30px;
     }
     .slide-image{
       height: 100%;width: 350px;
       border-radius: 10px;
     }
     image.active {
       transform: none;
       transition: all 0.2s ease-in 0s;
     }  
     image.quiet {
       transform: scale(0.87);
       transition: all 0.2s ease-in 0s;
     }
    .bottomLine{
         width: 750upx; height:30px;flex-direction: row;
         align-items: center;justify-content: center;
         margin-top: 20px; display: flex; 
     }
     .point{
         width: 10px;height: 10px;
         background-color: #007AFF;
         border-radius: 5px;
         margin-left: 24px;
     }