let slider = React.createRef();
let slideSpeed = 500;
let slidesCount = 0
let [leftDragger, setLeftDragger] = useState(0);
let [activeSlide, setActiveSlide] = useState(0);
useEffect(() => {
slidesCount = document.querySelectorAll('.slick-list .slick-slide:not(.slick-cloned)').length
slider.current.props.init();
}, [slidesCount]);
let settings = {
dots: false,
infinite: true,
speed: slideSpeed,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
init: () => {
console.log(slidesCount)
setLeftDragger(300);
console.log(leftDragger);
},
beforeChange: (currentSlide, nextSlide) => {
setActiveSlide(nextSlide);
console.log(leftDragger);
if(activeSlide == 0) {
setLeftDragger(100 / slidesCount * (activeSlide + 1) / 2 + "%");
} else {
setLeftDragger(20)
}
}
};
<Slider ref={this.slider} {...settings}>
<div>Слайд 1</div>
<div>Слайд 2</div>
</Slider>
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}>