Keen-Slider ist nicht mit Datenabruffunktionen kompatibel
P粉208286791
P粉208286791 2023-08-15 21:59:38
0
1
624
<p>Ich möchte öffentliche Daten abrufen und sie mit Keen-Slider anzeigen. Es scheint jedoch nicht sehr gut zu funktionieren, insbesondere wenn ich versuche, Links- und Rechtspfeile hinzuzufügen. Sie werden nicht auftauchen. Ein weiteres Problem besteht darin, dass der Schieberegler beim ersten Laden einfriert und sich erst nach der Größenänderung des Fensters bewegt. </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, InstanzRef] = useKeenSlider(options); useEffect(() => { fetch("./data.json") .then((response) => Response.json()) .then((json) => { console.log(json); setData(json); }); setOptions({ Initial: 0, Folien: { Herkunft: „Mitte“, perView: „3“, Abstand: 25 }, slideChanged(slider) { setCurrentSlide(slider.track.details.rel); }, erstellt() { setLoaded(true); } }); }, []);</pre> <p>Den vollständigen Code finden Sie [hier](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js). </p> <p>Ich habe die Ratschläge in diesen Beiträgen 1 und 2 befolgt und beim Abrufen der Daten die Optionen in <code>useKeenSlider</code> aktualisiert. Dies hilft, die Fehlermeldung zu mildern, löst das Problem jedoch nicht vollständig. </p> <p>Ich habe auch Pfeile hinzugefügt, die dem Beispiel hier folgen. </p> <p>Alle Vorschläge sind willkommen! </p>
P粉208286791
P粉208286791

Antworte allen(1)
P粉268284930

我认为你的映射数据失败了,所有的结果是:

<div className="keen-slider__slide number-slide1">1</div>
但我们期望的结果是:

<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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage