我正在开发一个使用Angular和PrimeNG的系统界面，它需要一个carousel来显示一些卡片。我选择使用ngPrime Carousel。所以，我在代码中实现了它，当我测试时，carrousel不考虑移动设备的大小。我尝试了很多方法，比如删除所有样式类，尝试将最小宽度设置为null，屏幕只是与旋转木马错误。如果我把卡本身，大小是正确的尊重。
我尝试过的一种方法，这是一种解决方案，是设置主div的最大宽度。旋转木马尊重这个命令，但如果我把它作为一个解决方案，屏幕响应将被破坏。
我想知道是否有人已经通过了这一点，如果有任何解决方案envolving旋转木马，whitout必须改变其他div。
下面是我的代码：
我的HTML文件：

钢琴

<div class="p-grid width-100 header" [@animate]="{value:'*',params:{delay:'200ms',scale:'0.2'}}">

    <div class="p-col-12 main-title">
        <h1>Escolha o seu plano</h1>
    </div>
    <div class="p-col-12 desc-title">
        <p>Escolha uma das opções abaixo e tenha acesso aos benefícios</p>
    </div>
</div>

<div *ngIf = "mobileSize" [@animate]="{value:'*',params:{delay:'200ms',scale:'0.2'}}" class="p-grid width-100 content">
    <p-carousel class="p-col-12 width-100 carousel" [value]="planoList" [numVisible]="1" [numScroll]="1">
        <ng-template class="width-100 carousel-template" let-plano pTemplate="item">
            <div class = "p-col-12 plano-box">
                <div class = "width-100 card-ofertas">
                    <div class = "p-col-12 preco-plano">
                        <h2>{{(plano.amount/100) | currency:'R$'}}</h2><p> / {{plano.code}}</p>
                    </div>
                    
                    <div class="p-col-12 desc-geral">
                        <p> {{ plano.description }}</p>
                    </div>
                    
                    <div *ngFor="let item of loremIpsum" class="p-col-12 item-carac">
                        <span style="font-size: 1rem" class="pi pi-check-circle"></span> <p>{{item}}</p>
                    </div>
    
                    <div class="p-col-12 botao-assinar-box">
                        <button mat-raised-button class="cta-button clickskin botao-assinar" (click)="assinar(plano)">
                            <span>Assinar</span>
                        </button>
                    </div>
                </div>
            </div>                
        </ng-template>
    </p-carousel>    
</div> 

<div *ngIf = "!mobileSize" [@animate]="{value:'*',params:{delay:'200ms',scale:'0.2'}}" class="p-grid width-100 content">
    <div class = "p-col-12 p-md-3 plano-box" *ngFor="let plano of planoList">
        <div class = "width-100 card-ofertas">
            <div class = "p-col-12 preco-plano">
                <h2>{{(plano.amount/100) | currency:'R$'}}</h2><p> / {{plano.code}}</p>
            </div>
            
            <div class="p-col-12 desc-geral">
                <p> {{ plano.description }}</p>
            </div>
            
            <div *ngFor="let item of loremIpsum" class="p-col-12 item-carac">
                <span style="font-size: 1rem" class="pi pi-check-circle"></span> <p>{{item}}</p>
            </div>

            <div class="p-col-12 botao-assinar-box">
                <button mat-raised-button class="cta-button clickskin botao-assinar" (click)="assinar(plano)">
                    <span>Assinar</span>
                </button>
            </div>
            
        </div>
    </div>
</div>

该组件：

import { Router } from '@angular/router';
import { Component, OnInit, ViewEncapsulation, OnDestroy, HostListener } from '@angular/core';
import { MatDialog } from '@angular/material';

import { fuseAnimations } from '@fuse/animations';

import { WirecardService } from 'app/services/wirecard.service';
import { BehaviorSubject } from 'rxjs';

import { EfetuarPagamentoComponent } from './dialogs/efetuar-pagamento/efetuar-pagamento.component';

@Component({
  selector: 'app-assinatura',
  templateUrl: './assinatura.component.html',
  styleUrls: ['./assinatura.component.scss'],
  animations: fuseAnimations,
  encapsulation: ViewEncapsulation.None
})
export class AssinaturaComponent implements OnInit, OnDestroy {
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.mobileSize = window.innerWidth <= 768;  
    this.screenSize = window.innerWidth + "px";
  }
  
  public planos$: BehaviorSubject<any[]>
  public planoList: any[] = [];
  public cssMainScreen: any
  public screenSize = window.innerWidth + "px";
  public mobileSize = window.innerWidth <= 768;  

  

  public loremIpsum = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                       "Quisque sit amet tortor rutrum, ornare lacus eget, dictum urna.",
                       "Donec hendrerit lectus quis dolor luctus dapibus.",
                       "Sed euismod sem nec nisl sollicitudin euismod.",
                       "Duis interdum orci non orci aliquam, ut porttitor ligula facilisis."]

  constructor(
    private _matDialog: MatDialog,
    private _wirecardService: WirecardService,
    private _router: Router) { }    

  async ngOnInit() {
    

    this.cssMainScreen = document.getElementsByClassName("content-template");    
    
    this.cssMainScreen[0].classList.add('padding-0')
    console.log(this.cssMainScreen[0])

    this._wirecardService.getPlanos();
    this.planos$ = this._wirecardService.planos$;

    this.planos$.subscribe((planos: any[]) => {
      this.planoList = planos.filter((v) =>  v.status);
      this.planoList.forEach(async (plano, index) => {
        const promocoes = await this._wirecardService.getPromocoesDia(plano.code);
        this.planoList[index]['promocoes'] = promocoes;
      });
    });
  }

  ngOnDestroy(){
    this.cssMainScreen[0].classList.remove('padding-0')
  }

  public assinar(plano: any): void {
    this._matDialog.open(EfetuarPagamentoComponent, {
      panelClass: 'app-efetuar-pagamento-dialog',
      disableClose: true,
      autoFocus: false,
      data: plano,
    });
  }

  public getPromocoesPlano(planoId: string) {
    return this._wirecardService.getPromocoesDia(planoId);
  }

  public voltarMinhaConta(){
    this._router.navigate(['minha-conta'])
  }
}

下面是如何：

下面是它应该是怎样的（打印是可能的感谢最大宽度）

感谢你的帮助！