연습장
swiper 본문
사건의 발달...
pagination fraction, progress 두개를 사용하기 위해 swiper 두개를 선언하여 컨트롤을 묶어줬었다
스와이퍼A(fraction).controller.control = 스와이퍼B(progress); 이런식으로. swiper 페이지네이션 두개 사용하는 방법으로 구글링하면 나옴
autoplay와 touchRatio:0 을 적용해서 마우스로 엄청 드래그하면 화면이 이상해지는 이슈발생
아래 참고
이상태로 멈춤
같은 클래스로 둘다 스와이퍼 선언하는 것이 이상하기도 하고 옵션을 A에 넣어서 안먹히면 B에 넣어보고 하는게 이상해서 다른 방법을 찾음
https://codepen.io/parkjubal/pen/vYzyYwP
(코드펜 상에서 fraction이 안보이는데 에디터에선 잘보임)
loop:true일 땐 realIndex값을 불러올 수 없어 on init 으로 swiper-slide 개수 -2 를 변수에 담아
activeIndex와 같이 사용하여 fraction을 생성함
(loop면 html상에서의 swiper-slide 개수에 +2개가 됨)
transitionStart // 슬라이드 전환이 시작될 때마다 함수 실행
화면이 1-2-3 후 다시 1로 왔을 때 fraction 숫자가 4/3으로 되는 문제 픽스
'스트립트' 카테고리의 다른 글
| 모달 내 dataTable 의 th와 td 정렬이 맞지 않는 문제 대응 (0) | 2023.03.29 |
|---|---|
| iOS에서도 유효한 레이어팝업 (0) | 2023.02.28 |
| 가로스크롤 (0) | 2023.02.12 |
| iOS에서도 적용되는 background-attachment:fixed (0) | 2023.02.10 |
| 탭메뉴 클릭시 해당 영역으로 이동, 스크롤 영역별 탭메뉴 클래스 제어, 탭메뉴 영역이후 스크롤시 상단에 탭 고정 (0) | 2022.08.18 |