swiper를 controller로 연동시킬 때 두 개가 서로 묘하게 어긋나면서 돌아가는 오류가 발생했다.
그 때 loopedSlides를 설정해서 오류를 잡았는데
이 옵션은 loop 시 파라미터의 duplicate 갯수를 설정해준다.
뭔지 감이 안 와서 개발자도구를 켜 봤다.
loopedSlides를 설정하지 않은 상태
1/3 2/3 3/3 는 내가 설정한 슬라이드, 그리고 앞 뒤로 duplicate 즉 복제된 슬라이드가 하나씩 있다.
여기까진 평범하게 빙빙 돌아가는 슬라이드의 모습이다.
loopedSlides: 3 설정했을 때
1/3 2/3 3/3이 앞 뒤로 복제됐다.
그러니까 두 개의 스와이퍼 연동 시 오류가 발생했을 때
각각의 스와이퍼의 duplicate 된 갯수가 일치하는지 확인해보고 맞지 않는다면 loopedSlides를 설정해 맞춰줬더니
서로 잘 맞물려서 돌아갔다.
'개발 > javascript' 카테고리의 다른 글
stroke-dasharray / stroke-dashoffset 활용, 애니메이션 만들기 (0) | 2023.02.13 |
---|---|
swiper controller 연동 오류일 때 (0) | 2023.01.08 |
[jQuery]$(window).scroll() 활용 / scroll 이벤트 +예제 (0) | 2022.12.28 |
간단하게 마우스커서 이미지 변경 (다양한 조건에 따라 커서 커스텀 하기) (2) | 2022.12.15 |
[javascript cart 구현하기]select 중복 선택 경고창 기능 만들어보기! (0) | 2022.12.11 |