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}>