Вращение slick slider на React после загрузки страницы

Question

На моей странице после загрузки запрашиваются данные. Получив их я отрисовываю slick slider:

render() {
    const { data } = this.props;
    
    const settings = {
      dots: false,
      infinite: true,
      arrows: false,
      autoplay: false,
      speed: 1500,
      slidesToShow: 7,
      slidesToScroll: 1,
      draggable: false,
      centerMode: true,
      initialSlide: 0,
      onInit: () => {
        this.slider && setTimeout( function(){ this.slider.slickGoTo( 5 ) }, 2000 );
      },
    };

    return(
        { data &&
          <Carousel {...settings} className={'carousel'} ref={slider => (this.slider = slider )}>
            { data['items'] && data['items'].map((item, index) => (
              <div className={'item'} key={index}>ДАННЫЕ</div>
            ))}
          </Carousel>
        }
       )
    }

Задача состоит в том, чтобы после загрузки карусели на странице, произошла прокрутка слайдера к определённому слайду. Согласно документации слика, я запускаю slickGoTo(N), используя метод onInit.

В этом примере я хочу прокрутить слайдер к 5 слайду через 2 секунды. Но это не срабатывает - слайдер остаётся на месте. Возможно, прокрутка происходит до того, как слайдер отрисуется на странице. Не смог нагуглить примеров, как сделать прокрутку у SlickSlider при загрузке страницы, а собственных знаний не хватает понять сути проблемы. Буду благодарен за помощь!

Answer 1

Вот рабочий пример с данной логикой. Загружаются данные, после через 2 секунды устанавливается активный слайд, что может включать анимацию.

import React, { useState, useEffect } from "react";

const slides = [
  { name: "slide1" },
  { name: "slide2" },
  { name: "slide3" },
  { name: "slide4" },
  { name: "slide5" },
  { name: "slide6" },
];

const getDataFromServer = async () => {
  return await new Promise((resolve) => {
    setTimeout(() => resolve(slides), 3000);
  });
};

const App = () => {
  const [data, setData] = useState(null);
  const [currentSlide, setCurrentSlide] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const res = await getDataFromServer();
      setData(res);
    };
    getData();
  }, []);

  useEffect(() => {
    if (data) {
      setTimeout(() => setCurrentSlide("slide5"), 2000);
    }
  }, [data]);

  return (
    <div>
      {!data
        ? "Loading..."
        : data.map(({ name }) => (
            <div
              key={name}
              style={{ color: name === currentSlide ? "red" : "" }}
            >
              {name}
            </div>
          ))}
    </div>
  );
};

export default App;

БЛОГ НА HUSL

Вращение slick slider на React после загрузки страницы

Ответы (1 шт):