swiper 반응형 관련 질문
본문
안녕하세요
swiper를 사용하여 반응형 웹사이트를 제작하고있습니다.
근데 pagination이나 next,prev버튼을 모바일일때 사용하고싶어서 애들을 pc일때 display :none하고
모바일일때 block하게끔 만들었습니다.
다만 pc에서 모바일사이즈로 줄어들때 pagination이나 버튼들은 잘 나오는데 동작하지않아서 새로고침하면 또 되더라구요 ㅠ
이거 다른글 찾아보니
observer: true,
observeParents: true,
이거를 추가하면 된다는데 저는 추가해도 안먹혀서요 ㅠ 이럴땐 어떻게 해야할까요..
var swiper = new Swiper(".my-swiper", {
observer: true,
observeParents: true,
slidesPerView: 5,
spaceBetween: 50,
navigation: {
nextEl: ".manuRole-swiper .swiper-button-next",
prevEl: ".manuRole-swiper .swiper-button-prev",
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 30,
centeredSlides: true,
roundLengths: true,
pagination: {
el: ".cloudData-swiper .swiper-pagination",
type: "fraction",
},
},
1024: {
slidesPerView: 4,
spaceBetween: 40,
},
1450: {
slidesPerView: 5,
spaceBetween: 50,
},
}
});
답변 1
보통 pagination 가 작동하지 않을 땐 모바일 breakpoint에서 문제가 있을겁니다
혹시 모르니 피시에도 다 pagination를 추가해주시고 display:none 해주세요