오버레이가 열려 있을 때 Flexslider 일시 중지

StackOverflow https://stackoverflow.com//questions/9608844

  •  09-12-2019
  •  | 
  •  

문제

우리는 현재 Flexslider 플러그인(최근 Woo Themes에서 인수)을 활용하는 프로젝트를 진행 중입니다.이 페이지에는 여러 개의 팝업이 있으며 팝업이 활성화되면 슬라이더가 일시 중지되고 팝업이 닫히면 다시 시작되기를 원합니다.일시 중지는 첫 번째 이동에만 작동하며 슬라이더 재개는 작동하지 않습니다.다음은 슬라이더에 사용하는 코드입니다."종료" 호출을 제외하고 사용 가능한 모든 호출에서 "시작" 기능을 전환해 보았습니다.

$w('#slider-frame').flexslider({
        animation: 'fade',
        directionNav: false,
        slideshowSpeed: 4000,
        controlNav: true,
        pauseOnHover: true,
        manualControls: '#indicator-dots li',
        start: function(slider){

            $w('.roi-click').click(function(){
                slider.trigger('mouseenter');
            });

            $w('div#ovrly, a#close').click(function(){
                slider.trigger('mouseleave');
            });

        }
    });

페이지 링크는 http://www.whitehardt.com/sandbox/whitehardt-v3.

이에 대한 도움을 주시면 대단히 감사하겠습니다.

도움이 되었습니까?

해결책

편집됨

내 생각엔 여기서 무슨 일이 일어나고 있는지 알아낸 것 같아.문제는 충돌하는 이벤트가 진행되고 있다는 것입니다.

  1. Flexslider는 다음을 수행하여 애니메이션을 시작합니다. setInterval 내부 상태 변수에 간격 ID를 저장합니다(slider.animatedSlides).
  2. 슬라이드 위로 마우스를 가져가면 Flexslider가 일시 중지됩니다.이는 애니메이션 간격을 삭제하여 수행됩니다. clearInterval().
  3. 당신은 roi 현재 존재하지 않는 간격을 지워서 다시 일시 중지되는 슬라이드의 링크입니다.
  4. 페이지에 오버레이가 있습니다. 이는 다음 작업을 수행한다는 의미입니다. mouseleave Flexslider에서 다음과 같이 애니메이션을 다시 시작합니다. setInterval() 간격 ID를 저장합니다.
  5. 닫기 버튼이나 오버레이를 클릭하여 오버레이를 닫습니다. resume(), 또한 다음을 수행합니다. setInterval(), 저장된 간격 ID를 덮어씁니다.그래서, 이제 두 개의 애니메이션이 진행됩니다., 따라서 속도가 두 배입니다. 을 더한, 다음에 전화하면 pause(), 저장된 ID를 덮어쓰기 때문에 마지막으로 설정한 간격만 지울 수 있습니다.따라서 더 이상 3단계에서 간격을 지울 수 없습니다.따라서 한 간격의 애니메이션이 느리게 진행되는 사이를 오가게 됩니다. mouseenter 그리고 당신이 할 때 두 개 mouseleave (빠른).

클릭할 때 일시중지하는 대신 다음 순간에 일시중지할 수 있습니다. #ovrly Flexslider의 마우스 종료는 오버레이의 마우스 오버보다 먼저 발생하기 때문입니다.

$w('#slider-frame').flexslider({
    animation: 'fade',
    directionNav: false,
    slideshowSpeed: 4000,
    controlNav: true,
    pauseOnHover: true,
    manualControls: '#indicator-dots li',
    start: function(slider){
        $w('div#ovrly').mouseover(function(){
            slider.pause();
        });
        $w('div#ovrly, a#close').click(function() {
            slider.resume();
        });
    }
});

하지만, 오버레이가 닫혀 있을 때 마우스가 슬라이더 위에 있는지 여부에 따라 비슷한 문제가 발생할 수 있습니다.하지만 잘 모르겠습니다.이상적으로 Flexslider는 이미 진행 중인 새 애니메이션을 시작하지 않습니다.이것을 flexslider.js로 해킹할 수 있습니다:

//FlexSlider: Automatic Slideshow Pause
slider.pause = function() {
  // Only pause if running
  if(slider.animatedSlides == null) {
      return;
  }

  clearInterval(slider.animatedSlides);

  // Clear the interval ID
  slider.animatedSlides = null;

  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
  }
}

//FlexSlider: Automatic Slideshow Start/Resume
slider.resume = function() {
  // Only resume if paused
  if(slider.animatedSlides != null) {
      return;
  }
  slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
  }
}

이러한 기능을 start: 매개변수 기능.

이번 변경으로 빠른 속도와 다시 정지할 수 없는 문제가 해결될 것입니다.오버레이가 나타날 때 슬라이더가 다시 시작되는 문제가 여전히 발생합니다.이 문제는 다음을 사용하여 해결할 수 있습니다. mouseover 앞서 언급한 솔루션입니다.

다음은 다음을 보여주는 바이올린입니다. mouseover 해결책: http://jsfiddle.net/jtbowden/TWN5t/

더 나은 코드이기는 하지만 두 번째 해킹이 필요하지 않은 것처럼 보입니다.

다른 팁

@jeff b, JS 수정 주셔서 감사합니다.FlexSlider의 2.x 지점에서 작동하지 않으므로 1.x 에만 해당됩니다.

2.x의 경우 NVartolomei가 수정이 제출되었습니다. rel="nofollow"> https://github.com/woothomes/flexslider/pull/322

나는 Brightcove + FlexSlider와 동일한 문제에 직면했다. 내 해결 방법은 다음과 같습니다.

이전 

        pausePlay: true,
        pauseText :"Pause",
        playText  :"Play"
.

그런 다음 

video.addEventListener(BCMediaEvent.PLAY, function () {
    $('.flex-pauseplay .flex-pause').trigger('click');
});

video.addEventListener(BCMediaEvent.STOP, function () {
    $('.flex-pauseplay .flex-play').trigger('click');   
});
.

.flex-pauseplay .Flex-Play CSS 불투명도 : 0

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top