asNav для не работающей ngx-slick-carousel в Angular 8 - PullRequest
Новая
       39

asNav для не работающей ngx-slick-carousel в Angular 8

1 голос
/ 11 октября 2019

Я работаю над проектом, созданным в 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: Невозможно прочитать свойство 'getSlick' из неопределенного

Если я уберу опцию asNavFor, ошибка исчезнет, ​​но щелчок пальцем больше не будет работать.

Чтоя могу сделать сейчас?

Спасибо

Ответы [ 2 ]

2 голосов
/ 13 октября 2019

Попробуйте это: 

<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',
};
0 голосов
/ 13 октября 2019

Вы ссылаетесь на неправильные классы в 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',
};
...