keen-slider與資料取得功能不相容
<p>我想要取得公共資料並使用keen-slider來顯示它們。然而,它似乎工作得不好,特別是當我嘗試添加左右箭頭時。它們不會顯示出來。另一個問題是滑桿在第一次載入時會凍結,只有在調整視窗大小後才會移動。 </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>請在[此處](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js)查看完整程式碼。 </p>
<p>我按照這些帖子1帖子2中的建議,在獲取數據時更新了<code>useKeenSlider</code>中的選項。這有助於緩解錯誤訊息,但並未完全解決問題。 </p>
<p>我還按照這裡的範例添加了箭頭。 </p>
<p>歡迎提出任何建議! </p>