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 !
Je pense que vos données cartographiques ont échoué, tous les résultats sont :
Mais le résultat que nous attendons est :