-1

I'm using framer to render data gotten from an API in slides on the front end but i'm having an issue with the dragConstraints, It won't slide through to the end.

  const [width, setWidth] = React.useState(0)
  const carousel = useRef()

React.useEffect(() =>{
    // calculates the min and max width for horizontal scroll.
    setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
  },[])     

          <section className='search-body'>
                {displaySearchText ? <p className='result-text'>Your search results</p> : ''}
                 {/* library to display search result in an horizontal scroll*/}
                  <motion.div ref={carousel} className='carousel'>
                        <motion.div drag='x' dragConstraints={{right:0, left:-width}} className='inner-carousel'>
                            {moveEl}
                        </motion.div>
                      </motion.div>
               </section>
Tomiwa
  • 59
  • 7

1 Answers1

0

What value is logged to the console for width? Could it be that since your useEffect runs after mount, the width used for your dragConstraint is 0 (your initial state value) and therefore your dragConstraints don't allow you to drag at all (its set to left: 0 and right: 0).

This shouldnt be an issue since width is in a state hook which'll trigger a re-render, but maybe the carousel width isn't correctly found.

Viktor Renkema
  • 1