Имеется такой код:
function MainPage() {
let slider = React.createRef();
let slideSpeed = 500;
let [slidesCount, setSlidesCount] = useState(0);
let [leftDragger, setLeftDragger] = useState(0);
let [activeSlide, setActiveSlide] = useState(0);
useEffect(() => {
setSlidesCount(slider.current.props.children.length);
setLeftDragger(100 / slidesCount / 2 + '%');
});
let settings = {
dots: false,
infinite: true,
speed: slideSpeed,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
beforeChange: (currentSlide, nextSlide) => {
setActiveSlide(nextSlide + 1);
if(activeSlide == 0) {
setLeftDragger(100 / slidesCount / 2 + "%");
} else {
setLeftDragger(100 / slidesCount * (activeSlide + 1))
}
console.log(activeSlide, leftDragger)
}
};
}
Необходим для реализации навигации slick slider'a
let [slidesCount, setSlidesCount] = useState(0); //Устанавливаю количество слайдов
let [leftDragger, setLeftDragger] = useState(0); //Устанавливаю позицию точки, которая будет перемещаться, для анимации
let [activeSlide, setActiveSlide] = useState(0); //Устанавливаю активный слайд
useEffect(() => {
setSlidesCount(slider.current.props.children.length); //После того как компонент появился, устанавливаю значение слайдов
setLeftDragger(100 / slidesCount / 2 + '%'); // Устанавливаю позицию точки, которая будет свигаться влево в зависимости от того, какой сейчас слайд, делю 100% ширины полосы на которых расположены точки и делю на два, т.к. у первой точки расстояние от левого края равно половине расстояния между точками в середине (видно на скрине выше)
});
//Этот коллбек срабатывает перед сменой слайда
beforeChange: (currentSlide, nextSlide) => {
setActiveSlide(nextSlide); //Перед тем как прокрутится слайд, устанавливаю следующий за ним
сoncole.log(nextSlide) // Выводит единицу и это верно, т.е. следующий слайд после нулевого - первый
console.log(activeSlide) // Но активный слайд остается нулем, в этом и проблема, остальные вызовы setActiveSlide работают корректно и стэйт меняется на активный слайд, в чем может быть проблема?
if(activeSlide == 0) {
setLeftDragger(100 / slidesCount / 2 + "%");
} else {
setLeftDragger(100 / slidesCount * (activeSlide + 1))
}
console.log(activeSlide, leftDragger)
}
};
