![](/img/trans.png)
[英]ngx-slick-carousel reinitialize slick after unslick in Angular
[英]asNavFor not working ngx-slick-carousel in Angular 8
我正在开发一个在 Angular 8 中制作的项目,并且想使用第三方库,例如ngx-slick-carousel并且一切正常,但我有缩略图轮播,其中有asNavFor
之类的选项,请参阅以下属性
imagesSlider = {
speed:300,
slidesToShow:1,
slidesToScroll:1,
cssEase:'linear',
fade:true,
autoplay: true,
draggable:true,
prevArrow:'.client-feedback .prev-arrow',
nextArrow:'.client-feedback .next-arrow',
asNavFor:".client-thumbnails",
};
thumbnailsSlider = {
speed:300,
slidesToShow:5,
slidesToScroll:1,
cssEase:'linear',
autoplay: true,
centerMode:true,
draggable:false,
focusOnSelect:true,
asNavFor:".feedback-slides .client-feedback",
prevArrow:'.client-thumbnails .prev-arrow',
nextArrow:'.client-thumbnails .next-arrow',
};
HTML 看起来像
<div class="feedback-slides">
<div class="client-feedback">
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="imagesSlider">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
</div>
<div class="client-thumbnails">
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="thumbnailsSlider ">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
如上代码不起作用并在控制台中显示错误,例如
未捕获的类型错误:无法读取未定义的属性“getSlick”
如果我删除选项asNavFor
错误将消失但拇指单击不再起作用。
我现在能做什么?
谢谢
您在asNavFor
中引用了错误的类。 它需要是 ngx-slick-carousel 实例的 class 名称。
试试这个,让我知道。
<div class="feedback-slides">
<div class="client-feedback">
<ngx-slick-carousel
class="carousel feedback"
#slickModal="slick-carousel"
[config]="imagesSlider">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
</div>
<div class="client-thumbnails">
<ngx-slick-carousel
class="carousel thumbs"
#slickModal="slick-carousel"
[config]="thumbnailsSlider ">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
imagesSlider = {
speed:300,
slidesToShow:1,
slidesToScroll:1,
cssEase:'linear',
fade:true,
autoplay: true,
draggable:true,
prevArrow:'.client-feedback .prev-arrow',
nextArrow:'.client-feedback .next-arrow',
asNavFor:".thumbs",
};
thumbnailsSlider = {
speed:300,
slidesToShow:5,
slidesToScroll:1,
cssEase:'linear',
autoplay: true,
centerMode:true,
draggable:false,
focusOnSelect:true,
asNavFor:".feedback",
prevArrow:'.client-thumbnails .prev-arrow',
nextArrow:'.client-thumbnails .next-arrow',
};
尝试这个:
<div class="feedback-slides">
<div class="client-feedback">
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="imagesSlider">
<div ngxSlickItem *ngFor="let slide of slides" id="client-feedback" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
</div>
</div>
thumbnailsSlider = {
speed:300,
slidesToShow:5,
slidesToScroll:1,
cssEase:'linear',
autoplay: true,
centerMode:true,
draggable:false,
focusOnSelect:true,
asNavFor:"#client-feedback",
prevArrow:'.client-thumbnails .prev-arrow',
nextArrow:'.client-thumbnails .next-arrow',
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.