vue3-swiper-网格布局横向无限循环

 swiper网格布局下好像不能设置竖向滚动切换

<template>
	<a-card class="card">
		<swiper
			:loop="true"
			:slides-per-view="3"
			:slidesPerGroup="1"
			:space-between="30"
			:loopAddBlankSlides="false"
			direction="horizontal"
			:modules="modules"
			:grid="{
				fill: 'column',
				rows: 3,
			}"
			:autoplay="{ delay: 1000, disableOnInteraction: false }"
			@swiper="onSwiper"
			@slideChange="onSlideChange"
		>
			<swiper-slide class="item" v-for="item in list">Slide {{item}}</swiper-slide>
		</swiper>
	</a-card>
<!--
slides-per-view: 每个视图的幻灯片数（在滑块的容器上同时可见的幻灯片）
可选值： number | 'auto' 默认值： 1
(当grid.rows>1时，“auto”当前与多行模式不兼容)

direction: 可选值： 'horizontal' | 'vertical'

grid: 开启网格布局，需导入Grid模块
	fill: 定义幻灯片按列或按行填充  可选值：'row' | 'column'
	rows: 幻灯片行数，用于多行布局  可选值：number

loopAddBlankSlides: 如果使用“网格”或“幻灯片分组”，并且幻灯片总量甚至不等于“幻灯片分组或网格行”，则自动添加空白幻灯片

loop: 设置为true以启用连续循环模式
	由于循环模式的工作性质（它将重新排列幻灯片），幻灯片的总数必须为：
		大于或等于 slidesPerView + slidesPerGroup
		设置偶数到slidesPerGroup（或使用loopAddBlankSlides参数）
		设置偶数到 grid.rows（或使用loopAddBlankSlides参数）
		(swiper 自动滚动展示的数量 slides-per-view 的两倍必须小于等于 *SwiperSlide* 组件的渲染数量，才能进行自动无限滚动)

slidesPerGroup: 设置幻灯片数量以定义和启用组滑动。很有用当与slidesPerView > 1一起使用时

autoplay:
	delay: 转换之间的延迟（毫秒）。如果未指定此参数，自动播放将被禁用
	disableOnInteraction: 设置为false时，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动
	(网格布局下，grid.fill需设置维column，否则SwiperSlide会乱跳)
-->
</template>

<script setup lang="ts">
// 引入swiper核心和所需模块
import { Grid,Autoplay } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css';
import 'swiper/css/grid';

// 在modules加入要使用的模块
const modules = [Grid, Autoplay]

const onSwiper = (swiper) => {
	console.log(swiper);
};
const onSlideChange = () => {
	console.log('slide change');
};

const list = ref([1,2,3,4,5,6,7,8,9,10])

</script>
<style scoped lang="scss">
.card {
	width: 500px;
	height: 200px;
}
.swiper {
	width: 100%;
	height: 200px;
	border: 3px solid #ddd;
	.item {
		background-color: #eee;
		padding: 8px 16px;
	}
}
</style>

swiper官网地址: Swiper Vue.js Components