Keen-slider n'est pas compatible avec les fonctions de récupération de données

Question

Je souhaite obtenir des données publiques et les afficher à l'aide de Keen-Slider. Cependant, cela ne semble pas très bien fonctionner, surtout lorsque j'essaie d'ajouter des flèches gauche et droite. Ils ne se présenteront pas. Un autre problème est que le curseur se fige lors du premier chargement et ne se déplace qu'après avoir redimensionné la fenêtre.

const [data, setData] = useState([]);
  const [options, setOptions] = useState({});
  const [currentSlide, setCurrentSlide] = useState(0);
  const [chargé, setLoaded] = useState(false);
  const [sliderRef, instanceRef] = useKeenSlider(options);

  useEffect(() => {
    récupérer("./data.json")
      .then((réponse) => réponse.json())
      .then((json) => {
        console.log(json);
        setData(json);
      });
    setOptions({
      initiale : 0,
      diapositives : {
        origine : "centre",
        par Vue : "3",
        espacement : 25
      },

      slideChanged(curseur) {
        setCurrentSlide(slider.track.details.rel);
      },
      créé() {
        setLoaded(vrai);
      }
    });
  }, []);

Voir le code complet [ici](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js).

J'ai suivi les conseils de ces articles 1 article 2 et j'ai mis à jour les options dans useKeenSlider Cela permet d'atténuer le message d'erreur, mais ne résout pas complètement le problème.

J'ai également ajouté des flèches en suivant l'exemple ici.

Toutes les suggestions sont les bienvenues !

Answer 1

Je pense que vos données cartographiques ont échoué, tous les résultats sont :

<div className="keen-slider__slide number-slide1">1</div>
Mais le résultat que nous attendons est :

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