제가 구현하려고 하는것은 책제목을 input text 노드에 입력하고 button 노드를 누르면 카카오api에서 이미지가 불러와지고
불러와진 이미지를 swiper API를 이용해 슬라이드기능을 적용시키는것입니다
main.js라는 스크립트에 카카오 api에서 책이미지를 받아와서 div속 swiper-slide 박스에 이미지를 집어넣는 js코드입니다
그리고 실행해보면 정상적으로 이미지를 받아와서 div박스에 잘넣어지는데요 이후에 이미지를 swiper 슬라이드기능 api를 이용해
카카오api 에서받아온 책이미지를 슬라이드 스크립트에 적용시키려고하는데 swiper 슬라이드 스크립트에서는
swiper-slide박스에 이미지가 들어온지 인식을 하지못하는지 Cannot read properties of undefined (reading 'parentNode') 라는
콘솔오류가나옵니다 이경우 html에서의 스크립트 배치 순서로 해결이 가능할거같은데
<script src="main.js"> // 카카오API로 책을 검색해 이미지를 받아와서 <div class="swiper-wrapper"> </div>에 집어넣기 </script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> // swiper 스크립트
<script> // swiper 스크립트
... 스위퍼 코드내용
</script>
이 순서로 배치를 해보아도 이미지가 div박스에 들어온걸 인식못하네요 defer 을 스크립트에 붙여봐도 마찬가지일까요?
swiper CDN, div, script 순으로 바꿔
눈아파
서식 돌았네