sly.js 슬라이딩, 현재 몇 번째 슬라이드인지 숫자로 표시

원문 : https://darsa.in/sly/

 

'sly' 는 PC 뿐만 아니라 모바일에서 (터치로도) 잘 작동한다..

 

그런데...

슬라이딩 하단에 몇 번째인지 표시해 주는 것은 되는데,

숫자로 몇 번째인지 표시해 주려면..

아무리 원문을 뒤져봐도, 구글링 해도 안 보여서..

이리저리 해 보다가 결국 아래와 같이 해결.

 

document 의 event 에 보면 'active' 이벤트에서 itemIndex 가 딱인듯 한데.

아니다, 항상 '0' 이라고 세팅된다. ㅎㅎ

 

찾아낸 답은,

pos.dest 가 화면에 표시할 위치값 이고,

각 요소의 폭(rel.frameSize)이 일정할 때

이를 나눠 주면 몇 번째 인지 알 수 있는 것.

 

이를테면, 각 요소의 폭이 300pixel 이라면,

pos.dest 는 0, 300, 600, ... 이런식으로 요소의 갯수만큼 증가한다.

rel.frameSize 는 요소 하나의 가로 폭 사이즈.

 

$('#아이디').sly({
  ///각종 옵션
},{
  change:function(event){
    $('#아이디').text(Math.floor(this.pos.dest / this.rel.frameSize) +1); // 사람이 읽는 수는 1부터..
  }
});

 

Math.floor() 하는 이유는...

만약 슬라이딩 되는 이미지를 잡고 좌우로 움직이면,

소수점이 표시되어서 보정해주는거.