I have implemented ngx-slick-carousel to showcase YouTube videos in my project. However, I am facing two main issues. Firstly, the carousel is not infinite, and when the last video is reached, there appears to be white spaces before it loops back to the first slide. I would like the carousel to seamlessly display the first slide next to the last one without having to animate back to the beginning.
Secondly, I have tried incorporating responsive design by adding code to my TypeScript file. Unfortunately, it seems that the YouTube video is not responding to this setup. I also attempted to utilize Bootstrap grid with no success. Any advice on resolving these challenges?
HTML file
<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 file
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');
}
}
I only have this in my css
.slick-prev:before, .slick-next:before {
color: black!important;
}
I'm using youTube-player Module to display the youTube videos and using the *ngFor to get the videos ID