keen-slider はデータ取得機能と互換性がありません
<p>公開データを取得してkeen-sliderを使って表示したいです。ただし、特に左右の矢印を追加しようとすると、あまりうまく機能しないようです。彼らは現れないでしょう。もう 1 つの問題は、最初の読み込み時にスライダーがフリーズし、ウィンドウのサイズを変更した後にのみ移動することです。 </p>
<pre class="brush:php;toolbar:false;">const [data, setData] = useState([]);
const [オプション, setOptions] = useState({});
const [currentSlide, setCurrentSlide] = useState(0);
const [ロード済み、setLoaded] = useState(false);
const [sliderRef、instanceRef] = useKeenSlider(オプション);
useEffect(() => {
fetch("./data.json")
.then((応答) => 応答.json())
.then((json) => {
コンソール.ログ(json);
setData(json);
});
setOptions({
初期値: 0、
スライド: {
原点: "中心"、
ビューあたり: "3"、
間隔: 25
}、
slideChanged(スライダー) {
setCurrentSlide(slider.track.details.rel);
}、
作成した() {
setLoaded(true);
}
});
}, []);
<p>完全なコードは [こちら](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js) を参照してください。 </p>
<p>これらの投稿 1、投稿 2 のアドバイスに従い、データを取得するときに <code>useKeenSlider</code> のオプションを更新しました。これによりエラー メッセージが軽減されますが、問題が完全に解決されるわけではありません。 </p>
<p>ここの例に従って矢印も追加しました。 </p>
<p>ご提案は大歓迎です! </p>