keen-slider does not work well with fetch data

Question

I want to fetch public data and display them using keen-slider. However it doesn't seem to work very well, especially when I tried to add in left-right arrows. They won't show up. Another issue is that the sliders freeze on first load and only move after the window is resized.

  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);
      }
    });
  }, []);

Please see the complete code here.

I followed the suggestion in these post1 post2 to update the options in useKeenSlider when I fetch the data. It helped to mitigate an error message but didn't solve the issue completely.

I also followed the example here to add in the arrow.

Any suggestion is appreciated!

Answer 1

you can solve this problem with the condition, if we have data then you can show the keen-slider else show a loading

{
  data ? <slider></slider> : <p>loading...</p>
}