Slick Carousel Слайд-счет

Question

Я использую гладкую карусель и пытаясь получить подсчет слайдов. Я использую React.js с ES6, ниже функция, которую я использую, чтобы вернуть счет, но я не понимаю, что console.log («inside» + n); печатает значение, в то время как внешняя печать печатает нуль, что я делаю неправильно?

countSlides() { 
    let n = 0; 
    $(this.innerSelector).on('init', (event, slick) => { 
     n = slick.slideCount; 
     console.log("inside" + n); 
    }); 

    console.log("outside" + n); 
    return n; 

    } 

Я создал класс для карусели, чтобы я мог создавать экземпляры в разных родительских компонентах. например для этого у меня есть:

class ImageCarousel extends React.Component { 
    constructor() { 
    super(); 
    this.carouselDidStart = false; 
    this.carouselControl = new CarouselControl({ 
     outerSelector: ".carousel-container", 
     innerSelector: ".extra-images-container", 
     infinite: false 
    }); 
    } 

А потом в классе CarouselControl я пытаюсь добавить эту countSlides функцию, так что я могу найти количество слайдов, как this.carouselControl.countSlides();

Answer 1

$(this.innerSelector).on является слушателем событий, поэтому он будет запущен, когда событие срабатывает, так что это асинхронная функция. Вы можете сделать это так же, как:

constructor() { 
    this.slideCount = 0; 
} 

componentDidMount() { 
    $(this.innerSelector).on('init', (event, slick) => { 
    this.slideCount = slick.slideCount; 
    }); 
} 

countSlides() { 
    return this.slideCount; 
} 

Answer 2

С опцией строки вы можете получить количество слайдов

$(this).slick("slickGetOption", "rows")