i want to make slider with dynamic content on it and changed based on click. i have used slick slider and its working fine at the first load, after clicking on any one content, new content will be added and remove the previous one. At this time slick slider not working.
Please help me, any help will be appreciated.
HTML Code:
<div class="video-placeholder" *ngFor="let relate of relatedArray">
<div class="carousel16to9ratio">
<div><img class="img-fluid"
src="image"
alt=""></div>
<div class="overlayIframe"
(click)="playNextVideo()">
</div>
</div>
<div class="carousel-video-title">video name</div>
</div>
typescript:
ngAfterContentInit() {
setTimeout(function () {
$('.carousel-custome').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<i class="fas fa-chevron-left prev"></i>',
nextArrow: '<i class="fas fa-chevron-right next"></i>',
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2.3,
slidesToScroll: 1,
centerMode: false,
initialSlide: 0
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2.3,
slidesToScroll: 1,
centerMode: false,
initialSlide: 0
}
}
]
});
}, 200);
}
on playNextVideo() function i again call ngOnInit() and remove slick data using
$('.carousel-custome').slick('slickRemove', null, null, true);
how to achieve this, please suggest me.