Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get offsetWidth of element in slick-track #2381

Open
pluderes opened this issue Jun 13, 2024 · 0 comments
Open

Get offsetWidth of element in slick-track #2381

pluderes opened this issue Jun 13, 2024 · 0 comments

Comments

@pluderes
Copy link

pluderes commented Jun 13, 2024

Guidelines for posting a new issue

I wanna get width of the first elem in slick-track. It oke in local but not working in env product when I resize window to mobile (for web) and mobile device

Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')
at HorizontalCarouselComponent.tsx:52:69
at Bm (react-dom.production.min.js:244:332)
at Oc (react-dom.production.min.js:286:111)
at q$ (react-dom.production.min.js:283:409)
at ml (react-dom.production.min.js:281:398)
at U0 (react-dom.production.min.js:273:439)
at Xs (react-dom.production.min.js:127:105)
at react-dom.production.min.js:267:273
And this is my code

  const slideRef = useRef<any>(null)

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
    if (slideRef.current && isMobile) {
      setWidthSlider(
        Number(
          slideRef.current.innerSlider.track.node.firstElementChild.offsetWidth // get width of the first elem in list slider
        )
      )
    }
  }, [slideRef.current, window.innerWidth, isMobile])

  <Slider
    ref={slideRef}
    {...defaultSettings}
    {...settings}
    slidesToShow={slideShow}
    afterChange={(currentSlide: number) => {
      setCurrentIndex(currentSlide)
    }}
  >
    {children}
  </Slider>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant