移动设备上 PrimeNG Carousel 宽度的越野车

如何解决移动设备上 PrimeNG Carousel 宽度的越野车

我正在使用 Angular 和 PrimeNG 开发一个系统界面，该界面需要移动设备、一个轮播来展示一些卡片。 我选择使用 ngPrime Carousel。 所以，我在我的代码中实现了它，当我测试时，carrousel 不尊重移动尺寸。 我尝试了很多东西，比如去掉所有样式类，尝试将 min-width 设置为 null 等。 屏幕只是旋转木马的错误。如果我单独放置卡片，则大小正确。

我尝试过的一种方法是将最大宽度设置为主 div。轮播尊重这个命令，但如果我把它作为一个解决方案，屏幕响应性将被破坏。

我想知道是否有人通过了这个，如果有任何涉及轮播的解决方案，无需更改其他 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:'*',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:'*',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'])
  }
}

下面是它的样子：

下面是它应该如何（由于 max-width 可以打印）

感谢您的帮助！