스와이퍼 작동이 안 돼요(내용 수정)
본문
<div class="swiper todoSwiper">
<ul class="mytodo_lst swiper-wrapper"></ul>
<div class="swiper-button-next todoBtn"></div>
<div class="swiper-button-prev todoBtn"></div>
<div class="swiper-pagination todoNav"></div>
</div>
<script type="text/javascript" src="<c:url value='/scripts/swiper/swiper-bundle.js'/>"></script>
<script>
var swiper = new Swiper(".todoSwiper", {
slidesPerView: 3.2,
spaceBetween: 0,
allowTouchMove: false,
lockClass: false,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
observer: true,
observeParents: true,
});
</script>
ul안의 li는 <head>태그 안에서 동적 요소로 자동 추가되고 있습니다.
문제눈 loop 적용이 안됐어요.. pagination도 안 보이고,
allowTouchMove: false 로 하면 버튼도 작동을 안 해요 ㅠ
그리고 next prev 버튼이 버튼 자체는 안 보이고 가상요소인 after만 보이는데 이건 왜 이럴까요?ㅜㅜ
CDN 방식은 사용 불가라 다운로드해서 넣었는데
혹시나 해서 CDN 방식으로 했는데도 안 되더라구요...
답변 2
위 소스만 올려서는 왜 버튼이 안보이는지, 버튼이 왜 작동안하는지 확인할수 있는게 없습니다.
확인할수 있는 링크 같은게 있어야 할것 같네요.
로컬로 테스트만 하는 중이라 주소를 올려드릴 순 없을 것 같아요ㅠ 추가로 코드를 더 올리려는데 어느 부분을 올려야 할까요?
css랑 동적 요소 추가 부분 더 올렸습니다ㅠ
observer: true,
observeParents: true // 이곳의 콤마를 없애고 해보세요...
});
</script>
observeParents: true 뒷 부분의 콤마를 없애고 해보세요...
안되네요..ㅠㅠ
src="<c:url value='/scripts/swiper/swiper-bundle.js'/>"
이 부분의 링크 주소가 이상한것 같습니다.
src="C:/scripts/swiper/swiper-bundle.js"></script>
위와 비슷하게 해야 할것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
