메뉴 건너뛰기

2016.12.22 11:25

bxslider 멈춤현상

조회 수 3100 추천 수 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
번호 제목 날짜 조회 수
69 jquery css div, li 리스트 선택한 메뉴 변경 출처: http://okkks.tistory.com/1062 [이건없지] file 2017.07.04 1482
68 jquery를 활용한 입력폼 초기화하기 2017.03.27 2601
67 Ajax 파일 업로드 샘플 코드 2017.03.10 2556
66 파일 업로드 방법, 이미지 파일 업로드 예제 소스 2017.03.06 2744
65 예제로 만나보는 제이쿼리 - 비동기 파일업로드 file 2017.03.06 2329
64 jQuery 입문: form 데이터 유효성 검사 2017.03.02 3345
63 jQuery 실행패턴 2017.03.02 2592
62 jquery 이용한 필수입력체크(input form) 2017.03.02 2531
61 검토하기: jQuery를 이용하여 form 처리하기 2017.03.02 2514
60 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기 2016.12.22 2761
59 하단 고정 레이어 스타일(CSS) 따라하기 2016.12.22 2650
58 항상 레이어가 정 가운데 위치하는 스크립트 2016.12.22 2464
57 scrolling to top 2016.12.22 2235
56 Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용) file 2016.12.22 3044
55 금액단위 제거 표기 2016.12.22 2528
54 시간 카운트 2016.12.22 2533
53 디자인 셀렉트 박스 & CSS 2016.12.22 2458
52 흐르는 배너 만들기2 2016.12.22 2694
» bxslider 멈춤현상 2016.12.22 3100
50 jquery 플러그인 링크 모음 2016.12.22 2696
Board Pagination Prev 1 2 3 4 Next
/ 4

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved