我的猫头鹰旋转木马只让我滑一次

Question

在我的角度项目中，我尝试使用 来显示我的产品卡。然而，当我检查它并查看手机和平板电脑时，我发现了一些问题。由于平板电脑上显示了 2 张卡，因此它不允许我从第四张卡中查看，并且由于移动设备中只显示 1 张卡，所以它不允许我从第三张卡中查看。

视频在这里： ///C:/Users/W11/Desktop/Goodfellas%20Green%20Grocery%20-%20Google%20Chrome%202024-04-15%2015-31-01.mp4

我尝试在我的猫头鹰旋转木马中进行无限循环，但没有成功。这是 HTML 代码：

<section>
  <div class="container">
    <h1 class="products-title">New Arrivals</h1>
    <div class="slider">
      <owl-carousel-o [options]="customOptions">
        <ng-template carouselSlide *ngFor="let product of products">
          <div class="card">
            <div class="card-content" [ngStyle]="{'background-color': isDarkTheme ? '#5eda5e' : '#3b5b2d'}">
              <img class="product-image" [src]="product.imgSrc" [alt]="product.name">
              <h2 class="product-title">{{ product.name | translate}}</h2>
              <p class="product-description">{{ product.description | translate}}</p>
              <p class="product-price">{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p>
              <!-- Display product variants if available -->
              <div *ngIf="product.variants && product.variants.length > 0" class="variants-container">
                <div class="variants-scroll-container">
                  <ul class="variants-images">
                    <li class="list-element" *ngFor="let variant of product.variants">
                      <img class="variant-image" [src]="variant.images" [alt]="variant.name">
                    </li>
                  </ul>
                </div>
              </div>
              <div class="button-product">
                <button [ngStyle]="{'background-color': isDarkTheme ? '#3b5b2d' : '#5eda5e'}" class="buy-now">{{'buy_now'| translate}}</button>
              </div>                                   
            </div>
          </div>
        </ng-template>
      </owl-carousel-o>
    </div>
  </div>
</section>

这是我的 TypeScript 代码，用于在 app-component.ts 中提供滚动：

customOptions: OwlOptions = {
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    dots: true,
    navSpeed: 700,
    navText: ['<', '>'],
    responsive: {
      0: {
        items: 1
      },
      768: {
        items: 2
      },
      1025: {
        items: 3
      }
    },
    nav: true
  }

Answer 1

您是否更改了代码中的某些内容？