킨 슬라이더는 데이터 가져오기 기능과 호환되지 않습니다
P粉208286791
2023-08-15 21:59:38
<p>공개 데이터를 가져와서 킨 슬라이더를 사용하여 표시하고 싶습니다. 그러나 특히 왼쪽 및 오른쪽 화살표를 추가하려고 하면 잘 작동하지 않는 것 같습니다. 그들은 나타나지 않을 것입니다. 또 다른 문제는 처음 로드할 때 슬라이더가 멈추고 창 크기를 조정한 후에만 움직인다는 것입니다. </p>
<pre class="brush:php;toolbar:false;">const [data, setData] = useState([]);
const [옵션, setOptions] = useState({});
const [currentSlide, setCurrentSlide] = useState(0);
const [loaded, setLoaded] = useState(false);
const [sliderRef, 인스턴스Ref] = useKeenSlider(옵션);
useEffect(() => {
가져오기("./data.json")
.then((응답) => response.json())
.then((json) => {
console.log(json);
setData(json);
});
setOptions({
초기: 0,
슬라이드: {
출처: "중심",
뷰별: "3",
간격: 25
},
SlideChanged(슬라이더) {
setCurrentSlide(slider.track.details.rel);
},
만들어진() {
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>
귀하의 매핑 데이터가 실패한 것 같습니다. 모든 결과는 다음과 같습니다.
으아악<div className="keen-slider__slide number-slide1">1</div>
하지만 우리가 기대하는 결과는 다음과 같습니다.