Angular 如何在ngx owl转盘中的转盘处添加起始空间？

我正在使用创建旋转木马。如何在旋转木马的开头添加起始空间，如下图所示？

---

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

工作人员突击检查：

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（仅限于虚拟图像和Carousel配置）：-

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)
    )
  }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{throwError}；
从“ngx-owl-carousel-o”导入{OwlOptions}；
导出接口PhotosApi{
albumId？：编号；
id？：编号；
标题？：字符串；
url？：字符串；
thumbnailUrl？：字符串；
}
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
apiData:PhotosApi；
限制：number=10；/{console.log（res）；this.apiData=res；}，
err=>投掷者（err）
)
}
}

我想我解决了这个问题。您应该看到下面的图片。 Component.ts具有以下代码

import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
    selector: 'app-carousel-holder',
    templateUrl: './carousel-holder.component.html',
    styleUrls: ['./carousel-holder.component.scss']
})
export class CarouselHolderComponent implements OnInit {    
    rangeArray = [1, 2, 3, 4, 5, 6];
    customOptions: OwlOptions = {
        loop: true,
        mouseDrag: false,
        touchDrag: false,
        pullDrag: false,
        autoHeight: true,
        dots: false,
        rtl: true,
        margin: 50,
        navSpeed: 700,
        navText: ['', ''],
        responsive: {
            0: {
                items: 1
            },
            400: {
                items: 2
            },
            740: {
                items: 3
            },
            940: {
                items: 4
            }
        },
        nav: true
    }

    constructor() { }

    ngOnInit(): void {
    }

    setClass(i){
        return `carousel-${i}`;
    }
}

html文件内容如下所示

<div>
    Some tags before
</div>
<div class = "background-div">
    <owl-carousel-o [options]="customOptions">
        <ng-container *ngFor = "let index of rangeArray">
            <ng-template carouselSlide>
                <div [ngClass] = "setClass(index)">
                    <img src = "../../assets/img/carousel.png">
                </div>
            </ng-template>
        </ng-container>
    </owl-carousel-o>
</div>
<div>
    Some tags after
</div>

---

你指的是盒子和背景图像之间的空间？我指的是右边的空间，因为如果索引===0，它需要添加空间，但当我这样做时，旋转木马断开扫描会显示堆栈闪电？你说“如果索引===0”是什么意思？旋转木马项目应该使用ngFor为第一个元素创建（在rtl模式下）为了从右边获得额外的空间，我应该添加一个类，例如，如果索引为0@Metalgear，那么它的右边距为3rem

.background-div{
    height: 300px;
    background-image: url('../../assets/img/background.png');
    background-size: cover;
    owl-carousel-o{
        height: 100%;
        padding: 15%;
        img{
            max-width: 300px;
        }

        div.carousel-1{
            margin-left: 30rem;
        }
    }
}