[bxSlider]_슬라이더 index 구하기, 이벤트 부여하기

bxSlider 설치는 다음 포스트 참고

https://yn971106.tistory.com/131

[bxSlider]_bxSlider 설치, 단순 예제

---

개요

 

bxSlider 를 통해 움직이는 div 나 img를 구현하였습니다.

 

여기서 정적인 요소를 움직이는게 아니라 ajax 와 같은 비동기 통신을 통해 데이터를 받아서 넣을 경우에는 어떻게 해야할까 고민해 보았습니다.

 

방법은 다음과 같습니다.

 

1. trigger를 건다

2. 로딩시 데이터를 전부 받아와서 이를 회전시킨다.

3. 내장함수 사용

 

2번의 경우 사실 이벤트를 부여할 필요도 없이 순서만 잘 지키고, aysnc , await 활용 등의 방법이 있고

 

이번에 다룰 내용은 3번의 내장함수 사용입니다.

---

bxSlider 의 옵션은 다음과 같습니다.

https://bxslider.com/options/

jQuery Content Slider | Responsive jQuery Slider | bxSlider

그 중 Callback 부분의 옵션을 이용해 보겠습니다.

 

 

 

<script>

$('.slide_Main').bxSlider({
     auto: true,
     autoControls: true,
     //stopAutoOnClick: true,
     pager: true,
     pause: 3000,
     slideWidth: 370,
               onSlideBefore: function(nextelement,nextIndex,nowIndex){
                   mapSelector(nowIndex);

             }

     });

위의 코드에서 

onSlideBefore메소드 함수를 선택했습니다

해당 메소드는 3가지 파라미터를 받습니다

슬라이드가 이동하기 전의 시점을 봤을때

2번째 파라미터의 인덱스 값은 이동하기 전의 엘리먼트의 인덱스 번호이고,

3번째 파라미터의 인덱스 값이 이동 후 엘리먼트의 인덱스 번호가 됩니다.

 

저는 슬라이더가 움직일 때 마다 해당 엘리먼트의 index 번호가 필요하였기 때문에.

3번째 파라미터의 인덱스를 가져와 다른 function에 전달하는 방식으로 이용하였습니다.

 

감사합니다.