swiper pagination multiple 관련으로 질문드리고싶습니다.

Question

코드를 먼저 보여드리겠습니다.jsp

게시글 제목

작성일

scriptvar swiper = new Swiper(".swiper1", { loop: true, autoplay: { delay: 3000, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination2", type: "progressbar", }, navigation: { nextEl: ".swiper-button-next1", prevEl: ".swiper-button-prev1", }, breakpoints: { 360: { slidesPerView: 1, spaceBetween: 50, }, 375: { slidesPerView: 1, spaceBetween: 50, }, 414: { slidesPerView: 1, spaceBetween: 50, }, 640: { slidesPerView: 1, spaceBetween: 50, }, 768: { slidesPerView: 2, spaceBetween: 30, }, 1024: { slidesPerView: 3, spaceBetween: 30, } } }); var pagingSwiper = new Swiper(".swiper1", { loop: true, autoplay: { delay: 3000, disableOnInteraction: false, }, pagination: { el:".swiper-pagination2_1", type: "fraction", }, navigation: { nextEl: ".swiper-button-next1", prevEl: ".swiper-button-prev1", }, breakpoints: { 360: { slidesPerView: 1, spaceBetween: 50, }, 375: { slidesPerView: 1, spaceBetween: 50, }, 414: { slidesPerView: 1, spaceBetween: 50, }, 640: { slidesPerView: 1, spaceBetween: 50, }, 768: { slidesPerView: 2, spaceBetween: 30, }, 1024: { slidesPerView: 3, spaceBetween: 30, } } })페이지네이션이 프로그래스바로 하나, 현재페이지와 전체페이지를 보여주는 것으로 하나총 두개의 페이지네이션이 필요하여 이렇게 작업했습니다.두개의 스크립트에 전부 loop, autoplay, breakpoint를 넣은 이유는 한쪽의 스크립트에 이것을 빼니보여주어야 할 이미지가 3개가 아닌 1개로 출력되거나, progressbar는 넘어가는데 fraction은넘어가지 않거나, 페이지의 개수는 4개로 출력되어야 할 것이 8개로 출력되는 등의 현상이 있어 두개 다 넣었습니다.그 결과, 페이지 이동 등을 건드리지않는다면 정상적으로 출력이 되는데, 이미지를 잡고 넘기는 식으로 하면 fraction은 변하지않고 progressbar만 변화가 적용된다던가 하면서 페이지네이션이 제대로 적용되지 않는 현상입니다.두개의 페이지네이션을 사용하는 방법이 잘못된 것일까요?

swiper pagination multiple 관련으로 질문드리고싶습니다.

0개의 답변

Q&A 목록