时间戳

首页 > 解决方案 > 如何在 ngx-owl carousel 的 carousel 中添加起始空间？

angular - 如何在 ngx-owl carousel 的 carousel 中添加起始空间？

问题描述

我正在使用ngx-owl-carousel-o创建一个轮播。如何像这张图片一样在轮播的开头添加一个起始空间？ 在此处输入图像描述

标签： angular

解决方案

请在下面找到我的解决方案：-

工作 Stackblitz：- https://stackblitz.com/edit/ngx-owl-carousel-o-2h5btn

HTML :- 

<div class="wrapper">
    <owl-carousel-o [options]="customOptions">

        <ng-container *ngFor="let slide of apiData; let i = index; let l = last">
                <ng-template class="slide" carouselSlide [id]="slide.id">
                    <div [style.margin]="(l ? '600px': '20px')">
                        <img [src]="slide.url" style="height: 300px"  [alt]="slide.id" [title]="slide.id">
        </div>
                </ng-template>
        </ng-container>
    </owl-carousel-o>
</div>

TS（只是虚拟图像和轮播配置）：-

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { throwError } from 'rxjs';

import { OwlOptions } from 'ngx-owl-carousel-o';

export interface PhotosApi {
  albumId?: number;
  id?: number;
  title?: string;
  url?: string;
  thumbnailUrl?: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  apiData: PhotosApi;
  limit: number = 10; // <==== Edit this number to limit API results
  customOptions: OwlOptions = {
    loop: true,
    autoplay: true,
    center: true,
    dots: false,
    autoHeight: true,
    autoWidth: false,
    rtl: true,
    margin: 30,
    lazyLoad: false
  }

  constructor(
    private readonly http: HttpClient,
  ) {}

  ngOnInit() {
    this.fetch()
  }


  fetch() {
    const api = `https://jsonplaceholder.typicode.com/albums/1/photos?_start=0&_limit=${this.limit}`;
    const http$ = this.http.get<PhotosApi>(api);

    http$.subscribe(
      res => {console.log(res);this.apiData = res;},
      err => throwError(err)
    )
  }
}

推荐阅读