Search code examples
reactjsnext.jsfrontend

How to get width form keen-slider/react


I need to know the width of each slide in the carousel to make the height the same. That way every element of the slider will be square.

enter image description here

I tried to find information in the documentation. I didn't find anything I needed.


Solution

  • I got this solution

    const [ref, internalSlider] = useKeenSlider({...})
    const slideHeight = internalSlider.current?.slides?.[0]?.clientWidth;
    
    <div ref={ref} className="keen-slider">
          {slides.map(slide => (
            <div style={{ height: slideHeight }}/>
          )}
    </div>