킨 슬라이더는 데이터 가져오기 기능과 호환되지 않습니다
P粉208286791
P粉208286791 2023-08-15 21:59:38
0
1
601
<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>
P粉208286791
P粉208286791

모든 응답(1)
P粉268284930

귀하의 매핑 데이터가 실패한 것 같습니다. 모든 결과는 다음과 같습니다.

<div className="keen-slider__slide number-slide1">1</div>
하지만 우리가 기대하는 결과는 다음과 같습니다.

으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿