angular使用swiper插件问题

angular使用swiper插件问题
子元素会上下叠加在一起，但是不会左右排列，能正常滑动
主要参考的这篇文章：https://blog.tcs-y.com/2021/11/17/angular-swiper/

img

//html代码
<swiper [config]="config" style="width: 500px;background-color: rebeccapurple; display: flex;">
    <ng-template swiperSlide class="box" style="width: 500px;height: 500px;">
        <div class="swiper-item" style="width: 500px;background-color: red;">
            1
        div>
    ng-template>
    <ng-template swiperSlide>
        <div class="swiper-item" style="width: 500px;background-color: green;">
            2
        div>
    ng-template>
    <ng-template swiperSlide>
        <div class="swiper-item" style="width: 500px;background-color: blue;">
            3
        div>
    ng-template>
swiper>

ts文件中config配置项有些能用有些不能用

import  { SwiperOptions } from 'swiper';
import SwiperCore, {Pagination, Navigation} from 'swiper';
import { Component, OnInit } from '@angular/core';
SwiperCore.use([Pagination, Navigation])

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent  {
   constructor(){}
   config: SwiperOptions = {
    slidesPerView: 2,
    spaceBetween: 0,
    autoplay:true,
    setWrapperSize:true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        clickable: true,
    }
}
}

样式也引入了

求解答