킨 슬라이더는 데이터 가져오기 기능과 호환되지 않습니다

Question

공개 데이터를 가져와서 킨 슬라이더를 사용하여 표시하고 싶습니다. 그러나 특히 왼쪽 및 오른쪽 화살표를 추가하려고 하면 잘 작동하지 않는 것 같습니다. 그들은 나타나지 않을 것입니다. 또 다른 문제는 처음 로드할 때 슬라이더가 멈추고 창 크기를 조정한 후에만 움직인다는 것입니다.

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);
      }
    });
  }, []);

전체 코드는 [여기](https://codesandbox.io/s/delicate-butterfly-d4vp5k?file=/src/App.js)에서 확인하세요.

저는 이 게시물 1, 2의 조언을 따르고 데이터를 가져올 때 useKeenSlider의 옵션을 업데이트했습니다. 이렇게 하면 오류 메시지를 완화하는 데 도움이 되지만 문제가 완전히 해결되지는 않습니다.

여기 예시에 따라 화살표도 추가했습니다.

어떤 제안이라도 환영합니다!

Answer 1

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

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

으아악