uniapp横屏移动端卡片缩进轮播图

效果：

代码：

<!-- 简单封装轮播图组件:swiperCard -->
<template>
	<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="10000" :duration="500"
		previous-margin="70rpx" next-margin="70rpx" @change="change">
		<swiper-item v-for="(item, i) in 5" :key="i">
			<view class="swiper-item uni-bg-red" :class="i === swiperIndex ? 'active' : ''">A</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				swiperIndex: 0
			}
		},
		methods: {
			change(e) {
				// console.log(e.target.current);
				this.swiperIndex = e.target.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: calc(100vh - 150rpx);
		width: 100%;

		.swiper-item {
			background-color: pink;
			height: calc(100vh - 200rpx);
			width: calc(100vw - 180rpx);
			border-radius: 10rpx;
			margin-top: 10rpx;
		}

		// 轮播图当前激活的样式
		.active {
			height: calc(100vh - 170rpx);
			margin-top: 0rpx;
			transition: all .2s ease-in 0s;
		}
	}
</style>