메뉴 건너뛰기

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(); //주석하기

  1. No Image 05Mar
    by
    2019/03/05 Views 2855 

    jquery 팝업 차단 없이 띄우기

  2. No Image 05Mar
    by
    2019/03/05 Views 1129 

    [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

  3. No Image 16Jan
    by
    2019/01/16 Views 1079 

    jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값)

  4. No Image 16Jan
    by
    2019/01/16 Views 1502 

    jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경)

  5. No Image 16Jan
    by
    2019/01/16 Views 1261 

    jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover)

  6. jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입)

  7. No Image 16Jan
    by
    2019/01/16 Views 1054 

    jQuery 기초 (JQuery - text(), val(), html(), attr(), prop())

  8. No Image 16Jan
    by
    2019/01/16 Views 1119 

    jQuery 기초 (attr()로 두가지 동시에 접근 / 변경)

  9. jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery)

  10. jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty)

  11. jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json))

  12. Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

  13. jQuery 기초 (jQuery 달력 (datepicker))

  14. jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼)

  15. No Image 16Jan
    by
    2019/01/16 Views 1021 

    .removeAttr() : 특정 속성을 제거

  16. No Image 16Jan
    by
    2019/01/16 Views 961 

    .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정

  17. popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

  18. jQuery Plugin : Slider

  19. jQuery datepicker 팝업창 사이즈 바꾸기

  20. jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved