swiper 卡片轮播 指示点样式demo效果（整理）

<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">美女卡片</block>
		</cu-custom>
		<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" circular="true" previous-margin="20px" next-margin="20px">
			<swiper-item v-for="(item, index) in info" :key="index">
				<view :class="item.colorClass" class="swiper-item">
					<image class="image" :src="item.url" mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长

				info: [{
    
    
						colorClass: 'uni-bg-red',
						url: 'https://img.zcool.cn/community/01hzxc63yqx11b9znjoimm3734.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 A'
					},
					{
    
    
						colorClass: 'uni-bg-green',
						url: 'https://img.zcool.cn/community/01jsy5em8t7jzkbs17kncj3837.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 B'
					},
					{
    
    
						colorClass: 'uni-bg-blue',
						url: 'https://img.zcool.cn/community/01dz1ugf5tuetaf47pyvxj3633.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 C'
					},
					{
    
    
						colorClass: 'uni-bg-green',
						url: 'https://img.zcool.cn/community/01vfjnenucrnxlyi2luwzu3437.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 D'
					}
				],

			}
		},
	}
</script>

<style lang="scss">
	page {
    
    
		width: 100%;
		height: 100%;
	}

	.content {
    
    
		text-align: center;
		height: 100vw;
	}

	.swiper-box {
    
    
		/* width: 95%; */
		height: 300rpx;
	}

	.swiper-item {
    
    
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
		margin: 10px;
		border-radius: 15upx;
		/* app上运行不显示图片，就需要加下面这行，设置高度 */
		height: 280upx;
	}

	.image {
    
    
		/* width: 750rpx; */
		width: 100%;
		height: 300rpx;
		border-radius: 15upx;
	}

	/* 默认指示点的样式 */
	.swiper-box .wx-swiper-dot {
    
    
		width: 15rpx;
		height: 15rpx;
		background: white;
		border-radius: 15rpx;
	}

	/* 选中指示点的样式 */
	.swiper-box .wx-swiper-dot.wx-swiper-dot-active {
    
    
		width: 30rpx;
		height: 15rpx;
		background: red;
		border-radius: 15rpx;
	}
</style>