ngx-slick-carousel 无限循环和响应式轮播

Question

我在我的项目中使用 ngx-slick-carousel 来显示 youtube 视频，第一个问题是轮播不是无限的，当最后一个视频出现时，第一个不在它旁边，只有白色空格，当轮播将最终视频播放到最后时，它会返回到第一张幻灯片，我希望轮播在最后一张幻灯片旁边显示第一张幻灯片，这样它就不会使动画返回到第一张幻灯片。

第二个问题是响应式显示，我将响应式代码放在我的 TS 文件中，但似乎 youtube 视频没有对此做出响应，我也尝试使用引导网格来实现这一点，但没有奏效，对此有何建议有问题吗？

HTML 文件

<div class="row">
  <div class="col-lg-9">
    <div class="slick-wrapper">
      <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config] = "slideConfig" (init)="slickInit($event)" (breakpoint)="breakpoint($event)">
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
          <div class="col-md-4">
            <youtube-player 
              videoId= {{slide.videoId}}
              suggestedQuality="default" 
              [height]="" 
              [width]="" 
              [startSeconds]="0"
              [endSeconds]="">
            </youtube-player>
          </div>  
        </div>
      </ngx-slick-carousel>
    </div>  
  </div>
</div>

TS 文件

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
    const tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    document.body.appendChild(tag);
  }

  slides = [
    {videoId: "rf8vM_X1g9U"},
    {videoId: "3xq7z7WBOGU"},
    {videoId: "9PBeqHEopLs"},
    {videoId: "1jeHyrRskdk"},
    {videoId: "KauOtgNuzQQ"}
  ];

  slideConfig = {
    "slidesToShow": 3, 
    "slidesToScroll": 1, 
    "autoplay": true, 
    "autoplaySpeed": 3000,
    "infinite": true,
    "responsive": [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  };

  slickInit(e: any) {
    console.log('slick initialized');
  }

  breakpoint(e: any) {
    console.log('breakpoint');
  }

}

我的 CSS 中只有这个

.slick-prev:before, .slick-next:before {
  color: black!important;
}

我使用youTube-player Module 显示youtube 视频并使用*ngFor 获取视频ID

Answer 1

我最终使用另一个轮播，我将把代码留在this other question

看来无限循环是个bug，github里有个issue这个