Как можно узнать количество слайдов slick slider?

Question

[uzi_no_uzi]

Каким образом можно узнать количество слайдов в slick slider'e?

Имеется ссылка на DOM элемент этого слайдера (React.js):

this.slider = React.createRef();

Узнать с помощью выборки слайдов из DOM'a не выйдет. т.к. там клонированные слайды:


Какие есть варианты? Это необходимо для формирования своей собственной навигации (dots).

Answer 1

[0xD34F]

this.slider.current.slick.slideCount

Comments

[uzi_no_uzi]

В this.slider.current нет объекта slick

[0xD34F]

Значит, вы наврали про ссылку.

[uzi_no_uzi]

0xD34F,

[0xD34F]

Советую правила почитать, особое внимание - на пункт 3.8.

[uzi_no_uzi]

constructor() {
        super();

        this.slider = React.createRef();
    }

    render() {

        let settings = {
            dots: false,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
          };

        return(
            <div className="main-page">
                <section className="about">
                   <Slider ref={this.slider} {...settings}>

Вот тут получаю ссылку на свой слайдер

[0xD34F]

Ну да, наврали. Зачем? Или вы не понимаете разницы между экземпляром компонента и DOM-элементом?

[uzi_no_uzi]

0xD34F, Да, видимо не понимаю разницу, из этого вытекает вопрос, как мне получить DOM элемент либо как мне узнать количество слайдов через экземпляр компонента

[0xD34F]

Что такое Slider?

[uzi_no_uzi]

0xD34F, Slider это компонент, который предоставляет slick

<Slider ref={this.slider} {...settings}>
    <div>Слайд 1</div>
    <div>Слайд 2</div>
</Slider>

Все элементы внутри этой обертки становятся слайдами

[0xD34F]

Да уж, без вашего пояснения я бы в жизни не догадался, что это компонент.

Давайте попробуем ещё раз: что такое Slider? Желаю видеть ссылку на github / npm.

[uzi_no_uzi]

0xD34F, https://github.com/akiran/react-slick

Вот тут описано

[0xD34F]

Это не обёртка над оригинальным slick'ом, а переписанный с нуля вариант специально для react'а. Свойства slick у корневого элемента там нет.

Смотрите количество переданных children:

this.slider.current.props.children.length