时间戳

首页 > 解决方案 > 猫头鹰轮播不会加载图像和按钮

javascript - 猫头鹰轮播不会加载图像和按钮

问题描述

我在我的 Angular 应用程序中使用 owl carousel，我正在发送 API 请求以获取项目并使用 owl carousel 在页面中显示它们。

我正在显示引导卡中的项目并且它工作正常但是一旦我将循环设置为 true 卡中的图像就没有被加载，即使我已经得到了响应并且我可以在控制台中看到我的所有项目但是当我在轮播中的项目之间滚动，就像延迟加载一样，图像需要一些时间才能显示出来。

.html 文件

<owl-carousel  [options]="myCarouselOptions" [items]="myList">
<app-info-card class="item" *ngFor="let item of myList" [item]="item"></app-info-card>  
 </owl-carousel>

信息卡文件

<div class="card">
  <div class="card-body" *ngIf="">
     // this is the image that it disappers when scrolling and redisplays after a while 
 <a href="javascript:void(0)" (click)="open()">
      <img (click)="open()" class="card-img-top" [src]="item.image" Onerror="this.src=''" alt="No image">
    </a>
   
  </div>

ts文件

myCarouselOptions = {
    items: 3,
    loop: true,
    margin: 10,
    autoplay: false,
    autoplayTimeout: 30000000,
    autoplayHoverPause: false,
    responsiveClass: true,
    nav: true,
    dots: false,
    rtl: false,
    responsive: {
      0: {
        items: 1,
        nav: false,
        dots: true,
      },}}


 ngOnInit() {
    this.getmyList();
  }

  check() {
   this.subscriptions.sink = this.itemsService
      .getList()
      .subscribe((response: any) => {
        if (response) {
          this.myList = response.data;
        }


      });
  }

我注意到我正在显示 6 个项目，但猫头鹰轮播创建了 12 个项目，6 个项目具有克隆类

标签： javascriptangularwebowl-carousel

解决方案

推荐阅读