Javascript ASNAV不工作ngx滑溜转盘角度8

我正在从事Angular 8中的一个项目&希望使用第三方库，如，一切正常，但我有缩略图转盘，其中有一个选项，如

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>

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

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

如果我删除选项

asNavFor

错误将消失，但拇指点击不再起作用

我现在能做什么

---

谢谢

您在

asNavFor

中引用了错误的类。它需要是ngx slick carousel实例的类名

试试这个，让我知道

imagesSlider={
速度:300,，
幻灯片放映：1，
幻灯片滚动：1，
cssEase:“线性”，
是的，
自动播放：对，
真的，
prevArrow:'.client feedback.prev arrow'，
nextArrow:'。客户端反馈。下一个箭头'，
asNavFor:“.thumbs”，
};
拇指钉滑块={
速度:300,，
幻灯片放映：5，
幻灯片滚动：1，
cssEase:“线性”，
自动播放：对，
centerMode：对，
可拖动：错误，
焦点选择：正确，
asNavFor:“.反馈”，
prevArrow:'.client缩略图.prev arrow'，
下一行：'.client缩略图。下一个箭头'，
};

您在

asNavFor

中引用了错误的类。它需要是ngx slick carousel实例的类名

试试这个，让我知道

imagesSlider={
速度:300,，
幻灯片放映：1，
幻灯片滚动：1，
cssEase:“线性”，
是的，
自动播放：对，
真的，
prevArrow:'.client feedback.prev arrow'，
nextArrow:'。客户端反馈。下一个箭头'，
asNavFor:“.thumbs”，
};
拇指钉滑块={
速度:300,，
幻灯片放映：5，
幻灯片滚动：1，
cssEase:“线性”，
自动播放：对，
centerMode：对，
可拖动：错误，
焦点选择：正确，
asNavFor:“.反馈”，
prevArrow:'.client缩略图.prev arrow'，
下一行：'.client缩略图。下一个箭头'，
};

试试这个：

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

拇指钉滑块={
速度:300,，
幻灯片放映：5，
幻灯片滚动：1，
cssEase:“线性”，
自动播放：对，
centerMode：对，
可拖动：错误，
焦点选择：正确，
asNavFor:#客户反馈“，
prevArrow:'.client缩略图.prev arrow'，
下一行：'.client缩略图。下一个箭头'，
};

试试这个：

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

拇指钉滑块={
速度:300,，
幻灯片放映：5，
幻灯片滚动：1，
cssEase:“线性”，
自动播放：对，
centerMode：对，
可拖动：错误，
焦点选择：正确，
asNavFor:#客户反馈“，
prevArrow:'.client缩略图.prev arrow'，
下一行：'.client缩略图。下一个箭头'，
};