keen-slider is not compatible with data fetching functions

Question

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.

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

See the full code [here](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js).

I followed the advice in these posts 1 post 2 and updated the options in useKeenSlider when getting the data. This helps alleviate the error message, but does not completely solve the problem.

I also added arrows following the example here.

Any suggestions are welcome!

Answer 1

I think your mapping data failed, all the results are:

<div className="keen-slider__slide number-slide1">1</div>
But the result we expect is:

<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>