2013-10-29 2 views
1

프리 모드에서 긴 행의 탭에 iDangero.us jQuery swiper plugin을 사용하고 싶습니다. 그것을 직관적으로 만들기 위해서 나는 swiper-container의 끝 (왼쪽과 오른쪽 각각)에 2 개의 페이드를 놓을 것입니다. 그러나 나는 swiper wrapper가 그 영역을 숨길 때만 이것을 보여주고 싶다. (예를 들어, 사용자가 조금 왼쪽으로 쓸어 넘기면 탭 시작 부분이 왼쪽에 사라지고 그라디언트가 나타나야한다.) 다음은 이미지가 무슨 뜻인지 보여주는 것 :iDangero.us swiper fade

enter image description here

은 거의 두 가지 문제를 제외하고, 그것을 만든 : 나는 swiper의 이벤트처럼 어떤 onSwipeAnimationEnd를 찾을 수 없습니다

  1. . onTouchEnd (현재 사용하고 있습니다)하지만 스니퍼를 출시 한 후에도 여전히 애니메이션이 있으므로 항상 올바르게 작동하지는 않습니다.

  2. initialSlide 옵션을 사용 onFirstInit 이벤트 핸들러는 슬라이더가 초기 위치의로 이동하기 전에 이러한 이벤트라고 0 인 position.offset 파라미터를 갖는다. 이 그라디언트의 가시성을 초기화하기 위해 이것을 사용하고 싶습니다.

나는 플러그인을 들여다 보았지만 그 중 많은 부분을 이해하지 못했습니다. 간단한 솔루션이나 내 요구를 충족시키기 위해이 플러그인을 수정하는 방법에 대한 몇 가지 가이드가 필요합니다. 너희들이 도울 수 있기를. 나는 다른 swiper 플러그인을 사용하고 싶지 않다. 나는 이것에 매우 만족한다. 그것은 모바일에서 매우 잘 작동합니다.

답변

2

첫 번째 질문에 touchEnd 다음에이 애니메이션을 덮기 위해 추가 onSlideChangeEnd 및 onSlideReset 콜백을 사용할 수 있습니다. 두 번째 질문에 대해서는 getWrapperTranslate 메서드를 사용하여 오프셋을 가져올 수 있습니다. onFirstInit 콜백 내에서 사용할 수 없으며 초기화 코드 이후에 사용하십시오. 작동하지 않으면 setTimeout을 사용하여 약 50ms의 작은 타임 아웃 후에 사용하려고 시도하십시오.

+0

onSlideChangeEnd 및 onSlideReset은 freeMode에서 작동하지 않습니다. 그러나 당신이 추천 한 다른 것, 나는 그것을 사용할 수 있을지도 모른다. 아주 예쁜 솔루션은 아니지만 작동 할 수도 있습니다. 나는 그것을 시도 할 것이다. 감사합니다 – SinistraD

+0

getWrapperTranslate 함께 setTimeout 트릭 tpogether 잘 작동합니다. 감사합니다. 애니메이션 끝에만 뭔가가 필요합니다 ... – SinistraD

+0

애니메이션 끝 부분에 mySwiper.wrapperTransitionEnd (콜백 함수) 메서드를 사용할 수 있습니다. –