作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在做一个用 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>
如上代码无法正常工作并在控制台中显示错误
Uncaught TypeError: Cannot read property 'getSlick' of undefined
如果我删除选项 asNavFor
错误将消失,但拇指点击不再起作用。
我现在可以做什么?
谢谢
最佳答案
您在 asNavFor
中引用了错误的类。它需要是 ngx-slick-carousel 实例的类名。
试试这个,让我知道。
<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',
};
关于javascript - asNavFor 在 Angular 8 中无法使用 ngx-slick-carousel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58339362/
我正在尝试实现 slick slider在我的 ember 应用程序中,我发现了这个 ember-cli-slick通过ember observer并且我必须使用 Slider Syncing 选项。
我正在做一个用 Angular 8 制作的项目,想使用第三方库,例如 ngx-slick-carousel一切正常,但我有缩略图轮播,其中有一个选项,如 asNavFor,请参阅以下属性 images
当用户单击拇指或主 slider 前进时,您可能会认为 .slick-active 会在拇指中指示主 slider 中镜像的幻灯片,但实际上所有拇指设置为.slick-active。我正在使用此脚本的
我是一名优秀的程序员,十分优秀!