ホームページ  >  に質問  >  本文

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>
P粉208286791P粉208286791403日前486

全員に返信(1)返信します

  • P粉268284930

    P粉2682849302023-08-16 16:16:33

    データのマッピングが失敗したと思います。結果はすべて次のとおりです:

    <div className="keen-slider__スライド番号-slide1">1</div>
    しかし、私たちが期待する結果は次のとおりです:

    リーリー

    返事
    0
  • キャンセル返事