owl 轮播的网格布局

Question

我正在使用 ngx-owl-carousel 在我的 Angular 项目中显示一些数据。问题是我想使用网格布局，但我无法让它工作

当我尝试实现网格时，旋转木马告诉我没有要呈现的数据，而且什么也没有显示。您现在在我的代码中看到的是我的垫子桌上没有网格的解决方案。

我需要帮助的是找出放置我的 div 的位置，以便我可以在我的垫子桌上移动。无论我将 div 放在哪里，轮播都停止工作。

谢谢。

<owl-carousel-o [options]="customOptions">
<div class="wrapper">
  <div *ngFor="let data of dataSources">
      <ng-container>
          <ng-template carouselSlide [id]="data.id">
    <mat-toolbar>
        <span class="title-center">{{data[0].serviceName}}</span>
    </mat-toolbar>
    <img class="png-icon" src="../../assets/images/jenkin.png">
     <!-- Change the image dynamically on servicetype-->
    <mat-table [dataSource]=data>
      <ng-container matColumnDef="jobnumber">
        <mat-header-cell *matHeaderCellDef>Job Number</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.jobNumber}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.serviceName}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="date">
        <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.timestamp | date}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="buildtime">
        <mat-header-cell *matHeaderCellDef>Buildtime</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.duration | date: 'mm:ss'}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="result">
        <mat-header-cell *matHeaderCellDef>Result</mat-header-cell>
        <mat-cell *matCellDef="let element"><mat-basic-chip [ngClass]="element.result === 'ABORTED' || element.result === 'FAILURE' ? 'red' : 'green'"><p>{{element.result}}</p></mat-basic-chip></mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="jenkinsColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: jenkinsColumns;"></mat-row>
    </mat-table>
  </ng-template>
</ng-container>
  </div>
</div>
</owl-carousel-o>

.wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
    grid-row-gap: 25px;
    grid-column-gap: 25px;
}

.mat-cell {
    color: white;
}

.mat-header-cell{
    color: white;
}

.mat-header-text {
  color: white;
}

.png-icon {
  width: 50px !important;
  height: 50px !important;
  margin-left: 175px;
  margin-top: 230px;

}
.mat-chip{
    background-color: #00ff00;
    margin-top: 5px;
    margin-bottom: 5px;
}

.warning-mat-chip {
    background-color: #ff0000;
}

.pending-mat-chip{
    background-color: #ffff00;
}

mat-toolbar {
  background: transparent;
}
.title-center {
  background: transparent;
  color: white;
  flex: 1 1 auto;
  text-align: center;
  margin-top: 560px;

}

mat-table {
    background: #425F6D;
    margin-left: 160px;
    margin-right: 150px;
    border-radius: 25px;
    border: 1px solid transparent;
    padding: 20px; 
}

.red {
  border: 2px solid #8B0000;
  background: #c40000;
}

.green {
  border: 2px solid #006400;
  background: #03bf00;
}

mat-basic-chip {
  width: 80px;
  text-align: center;
  border-radius: 20px;
}

Answer 1

您使用 ngx-owl-carousel-o 不正确。

您只能将幻灯片的标记放入 <owl-carousel-o [options]="customOptions">...</owl-carousel-o>。你可以这样做：

<owl-carousel-o [options]="customOptions">
  <ng-template carouselSlide>My slide markup 1</ng-template>  
  <ng-template carouselSlide>My slide markup 2</ng-template>  
  <ng-template carouselSlide>My slide markup 3</ng-template>  
</owl-carousel-o>

或以这种更短、更增强的方式：

<owl-carousel-o [options]="customOptions">
   <ng-container *ngFor="let slide of slidesStore">
      <ng-template carouselSlide [id]="slide.id">
        <div class="slide-content-wrapper">slide.content</div>
      </ng-template>
   </ng-container>
</owl-carousel-o>

关注<ng-template carouselSlide>。 carouselSlide 是结构指令，它获取其内容并稍后添加到轮播所需的位置。

您必须保持层次结构：

 <owl-carousel-o>
  <ng-template carouselSlide>
    ...

或

<owl-carousel-o>
  <ng-container *ngFor="let slide of slidesStore">
    <ng-template carouselSlide [id]="slide.id">
    ...

并避免 HTML 标签包装 <ng-template carouselSlide>.

我不知道您使用 ngx-owl-carousel-o 的意图，但从您示例的 css 来看，您似乎正在尝试安排 6 张幻灯片

.wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
    grid-row-gap: 25px;
    grid-column-gap: 25px;
}

但是，您似乎在这里犯了错误。您将规则 grid-template-columns 加倍，第二条规则可能无法正常工作。 auto 应更改为任何物理值（例如 px）。

要定义幻灯片的数量，请使用选项 items。

owl 轮播的网格布局

Grid layout for owl carousel

owl-carousel

angular