定制卡牌式 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;
	 }