스와이퍼 작동이 안 돼요(내용 수정)
</strong></p>
<p> </p>
<p><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></p>
<p> </p>
<p><script type="text/javascript" src="<c:url value='/scripts/swiper/swiper-bundle.js'/>"></script></p>
<p><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></p>
<p> </p>
<p><strong>
ul안의 li는 <head>태그 안에서 동적 요소로 자동 추가되고 있습니다.
문제눈 loop 적용이 안됐어요.. pagination도 안 보이고,
allowTouchMove: false 로 하면 버튼도 작동을 안 해요 ㅠ
그리고 next prev 버튼이 버튼 자체는 안 보이고 가상요소인 after만 보이는데 이건 왜 이럴까요?ㅜㅜ
CDN 방식은 사용 불가라 다운로드해서 넣었는데
혹시나 해서 CDN 방식으로 했는데도 안 되더라구요...
답변 2개
observer: true,
observeParents: true // 이곳의 콤마를 없애고 해보세요...
});
</script>
observeParents: true 뒷 부분의 콤마를 없애고 해보세요...
답변에 대한 댓글 2개
이 부분의 링크 주소가 이상한것 같습니다.
src="C:/scripts/swiper/swiper-bundle.js"></script>
위와 비슷하게 해야 할것 같습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인