如何根据响应变化更改 Angular Carousel 的cellsToShow

我用angular-responsive-carousel来做我的Angular 项目.

 <carousel [cellWidth]="'100%'" [objectFit]="'contain'" [margin]="40" [cellsToShow]="3">
      <div *ngFor="let service of services;" class="carousel-cell ">
        <div class="flex flex-col w-full">
          <img src={{service.image}} class="w-full" alt="" />
          <div class="service-shadow px-4 py-4 flex flex-col gap-2  rounded-b-xl">
            <p class="text-base font-bold ">{{service.title}}</p>
            <p class="text-sm text-[#00171BB2]">{{service.content}}</p>
            <div class="flex gap-2 items-center">
              <p class="text-[#2B3384] font-semibold">Learn More </p>
              <img src="/assets/images/icons/purple-arrow.svg" class="purple-arrow" alt="" />
            </div>
          </div>
          <div>
          </div>
        </div>
      </div>
 </carousel>

我不知道如何根据响应的变化来更改[cell ToShow].

我使用的是ANGLE版本13和TailWind css. TailWind css中有断点. max-2xl: 1536px [cellsToShow]=4 max-xl: 1280px [cellsToShow]=3 max-lg: 1024px [cellsToShow]=2 max-md: 768px [cellsToShow]=1个

如果我的解释有什么不清楚的地方，请告诉我.