2

На моей странице после загрузки запрашиваются данные. Получив их я отрисовываю 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 при загрузке страницы, а собственных знаний не хватает понять сути проблемы. Буду благодарен за помощь!

1
  • Не очень понятно зачем вам именно прокрутка после инициализации. Укажите сразу активный слайд 5. Если же вам нужно именно прокрутить, то вникнитесь в жизненный цикл компонентов. Почитайте документации, найдите тот, который отвечает, что компонент был отрендерен. И в нем уже запускайте свою функцию goTo 26 янв 2021 в 7:19

1 ответ 1

0

Вот рабочий пример с данной логикой. Загружаются данные, после через 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;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.