메뉴 건너뛰기

2016.12.22 20:25

bxslider 멈춤현상

조회 수 10100 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
1번과 2번을 같이 처리 지금은 업데이트된 버전이 나온걸로 알고 있음

1. bxslider 는 슬라이드 애니메이션 동작할때 css translate3d 와 jquery animate를 사용한다.

ios webview 에서는 translate3d 를 지원하므로 css 로 애니메이션이 동작을 하는데, 애니메이션이 끝나면 transitionend 이벤트가 실행이 되고 slider.working = false; 가 되면서 애니메이션이 끝난다.

그런데 스크롤을 함과 동시에 이미지를 넘기면 transitionend 가 실행이 안되고 slider.working 은 계속 ture상태로 남게되면서 bxslider는 더이상 동작하지 않는다.

이 문제를 해결하기 위해서 transitionend 가 발생하지 않으면 slider.working = false; 를 실행시키기 위해 소스를 수정해보았다.

jquery.bxslider.js 를 열어서

var setPositionProperty = function(value, type, duration, params){

이 부분을 찾은다음

// set the property value
el.css(slider.animProp, propValue);

css 속성을 세팅하는 부분 아래에다가

// ios에서 스크롤하면서 작동하면 transitionend 이벤트가 안먹혀서 추가함 by starkey
var dummy = setTimeout(function(){
    slider.working = false;
}, duration+1);
// -->

를 추가하고,

정상적으로 transitionend 가 발생했을대 clearTimeout 을 해준다.

el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
   clearTimeout(dummy); // transitionend 가 동작하면 clearTimeout 해줌
   // unbind the callback
   el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
   updateAfterSlideTransition();
});

출처 :

http://starkey1984.blogspot.kr/2016/04/bxslider-ios-freezes.html

2. 주석처리 

var onTouchStart = function(e){
   if(slider.working){

    //e.preventDefault(); //주석하기

...

var onTouchMove = function(e){
   var orig = e.originalEvent;
   // if scrolling on y axis, do not prevent default
   var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
   var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
   // x axis swipe
   if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){

    //e.preventDefault(); //주석하기

List of Articles
번호 제목 날짜 조회 수
59 하단 고정 레이어 스타일(CSS) 따라하기 2016.12.22 7729
58 항상 레이어가 정 가운데 위치하는 스크립트 2016.12.22 6908
57 scrolling to top 2016.12.22 6470
56 Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용) file 2016.12.22 10746
55 금액단위 제거 표기 2016.12.22 6217
54 시간 카운트 2016.12.22 7108
53 디자인 셀렉트 박스 & CSS 2016.12.22 6347
52 흐르는 배너 만들기2 2016.12.22 8353
» bxslider 멈춤현상 2016.12.22 10100
50 jquery 플러그인 링크 모음 2016.12.22 49507
49 html 테이블 고정 (table fixed) 2016.11.18 7116
48 이미지 클릭 손 (cursor:pointer) 2016.11.18 7110
47 jQuery Selector (셀렉터) 2016.11.18 6931
46 날짜 검색 범위 정하기 (jquery) file 2016.11.17 7320
45 jQuery 날짜 비교 (날짜비교) 2016.11.17 10055
44 jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox) file 2016.11.17 8020
43 jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅 2016.11.17 10039
42 jquery 뒤로가기 2016.11.17 6511
41 jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name 2016.11.17 8542
40 jQuery, JavaScript 새로고침(reload) 2016.11.17 6951
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved