在Angular 8中无法正常使用ngx-slick-carousel [英] asNavFor not working ngx-slick-carousel in Angular 8

问题描述

我正在研究Angular 8& amp;中的项目.想要使用第三方库，例如 ngx-slick-carousel 和一切正常，但是我有缩略图轮播，其中有一个 asNavFor 之类的选项，请参见以下属性

I am working on a project made in Angular 8 & want to use a third-party library such as ngx-slick-carousel and everything is working fine but I have thumbnail carousel, where an option like asNavFor, see the below attributes

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>

上述代码不起作用&在控制台中显示错误，例如

as above codes not working & showing an error in the console like

未捕获的TypeError:无法读取未定义的属性'getSlick'

Uncaught TypeError: Cannot read property 'getSlick' of undefined

如果我删除了 asNavFor 选项，错误将消失，但是拇指单击不再起作用.

If I remove the option asNavFor error will disappear but thumb click doesn't work anymore.

我现在该怎么办?

谢谢

推荐答案

您在 asNavFor 中引用了错误的类.它必须是ngx-slick-carousel实例的类名.

You are referencing the wrong classes in asNavFor. It needs to be the class name of the ngx-slick-carousel instance.

尝试一下，让我知道.

<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',
};

这篇关于在Angular 8中无法正常使用ngx-slick-carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！