<p>I want to get public data and display them using keen-slider. However, it doesn't seem to work very well, especially when I try to add left and right arrows. They won't show up. Another problem is that the slider freezes when first loading and only moves after resizing the window. </p> <pre class="brush:php;toolbar:false;">const [data, setData] = useState([]); const [options, setOptions] = useState({}); const [currentSlide, setCurrentSlide] = useState(0); const [loaded, setLoaded] = useState(false); const [sliderRef, instanceRef] = useKeenSlider(options); useEffect(() => { fetch("./data.json") .then((response) => response.json()) .then((json) => { console.log(json); setData(json); }); setOptions({ initial: 0, slides: { origin: "center", perView: "3", spacing: 25 }, slideChanged(slider) { setCurrentSlide(slider.track.details.rel); }, created() { setLoaded(true); } }); }, []);</pre> <p>See the full code [here](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js). </p> <p>I followed the advice in these posts 1 post 2 and updated the options in <code>useKeenSlider</code> when getting the data. This helps alleviate the error message, but does not completely solve the problem. </p> <p>I also added arrows following the example here. </p> <p>Any suggestions are welcome! </p>

<div className="keen-slider__slide number-slide1">1</div>
      <div className="keen-slider__slide number-slide2">2</div>
      <div className="keen-slider__slide number-slide3">3</div>
      <div className="keen-slider__slide number-slide4">4</div>
      <div className="keen-slider__slide number-slide5">5</div>
      <div className="keen-slider__slide number-slide6">6</div>