슬라이드 쇼 + 캐 러셀 함께 jquery

Question

나는 슬라이딩 콘텐츠 패널 내에서 슬라이드 쇼에서 콘텐츠 페이드를 구현했습니다.

슬라이드 쇼의 페이드 인은 슬라이딩 패널의 첫 번째 리에 있지만 슬라이딩이 무작위로 움직이기 때문에 문제는 슬라이드 쇼를 표시 할 수 없습니다.

필요한 것은 슬라이딩이 슬라이드 쇼의 애니메이션을 완료 할 때까지 기다려야한다는 것입니다. 슬라이드 쇼가 완료되면 슬라이딩 패널의 다음 li가 나타나야합니다. 여기

당신 싶어 슬라이드 쇼 효과를 볼 경우 그

//Fade in slide show 
var quotes = $(".inner_detail div"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote();  
//Slider 
    $('#news-container').vTicker({ 
     speed: 800, 
     pause: 3000, 
     animation: 'fade', 
     mousePause: false, 
     showItems: 1 
    }); 

에 사용되는 코드, JS에서 슬라이더 코드를 제거하고 어떻게 슬라이드 쇼의 작품을 볼 수 있습니다하시기 바랍니다. (여기 fiddle 만 슬라이드 쇼를 보여줄 수)

다음

인 DEMO 작업

감사에서 (이의 첫 번째 슬라이딩 리 데모 빠르고 이동 슬라이딩 때문에 볼 수 질수 슬라이드 쇼 사업부가 있습니다) 사전 ...

Answer 1

나는 이것을위한 해결책을 발견했다. 나는 콜백 함수를 사용하여 액션이 완료 될 때까지 슬라이더를 멈추게했다.

//Editorial Slide + Carousel 
var isAni = true; 
$(window).load(function(){ 
var quoteIndex = -1; 

function showNextQuote(ele,e) { 
    ++quoteIndex; 
    e.isPaused = true; 
    if(quoteIndex < ele.length-1){ 
     ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").delay(2000).fadeOut(2000,"swing", function(){ 
      showNextQuote(ele,e) 
     }); 
    }else{ 
     ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").fadeOut(2000,"swing",function(){ele.eq(quoteIndex+1 % ele.length).fadeIn(0); 
     quoteIndex = -1;e.isPaused = false;}); 
    } 
} 
//showNextQuote(); 

//Slider 
    $('#news-container').vTicker({ 
     speed: 800, 
     pause: 3000, 
     animation: 'fade', 
     mousePause: true, 
     showItems: 1, 
     callback : function(ele,e){ 
      var inner = ele.children("li:first").find("div.inner_detail"); 
      if(inner.length !=0){ 
       quoteIndex = -1; 
       showNextQuote(inner.find("div"),e); 
      } 
     } 
    }); 
}); 

PS - 콜백 기능은 vticker.js로 작성되었지만 불행히도 여기에 파일을 게시 할 수 없습니다.

답장을 보내 주셔서 감사합니다.

Answer 2

플러그인을 수정하지 않고는이 작업을 수행 할 수 없습니다. 그것은 자체에 대한 참조를 유지하지 않으므로 항상 실행중인 함수의 묶음 일뿐입니다. 귀하의 수 있습니다

1. 는

첫 번째 방법으로 이동하기로 결정하는 경우는, 플러그인은 'isPaused'속성이 포함 자신의 버전을 쓰기 플러그인을 수정하고 자체 as seen here

을에 대한 참조를 추가 이 플러그인을 사용하여 애니메이션이 끝날 때까지 플러그인을 일시 중지 할 수 있습니다.

Answer 3

정확하게 아는 사람이라면 가능하다고 생각합니다. 당신이 슬라이더 기능을 시작하기 전에 초 Wait_For_SlideToFinish없이 XXX에 대한 슬라이드 쇼의 요소들이 당신은 이제 슬라이더를 지연시킬 수

1) Wait_For_SlideToFinish = NO.Of.Elements * (fadeIn_Value + delay_Value + fadeOut_value)

2)와 같은 간단한 단계를 수행 할 수 있습니다에서.

내가 귀하의 질문을 이해한다면이 방법이 효과적 일 수 있습니다.

Answer 4

원하십니까?

var quotes = $(".inner_detail div"); 
    var quoteIndex = -1; 
    var fadeIn_time = 2000, delay_time = 2000, fadeOut_time = 2000; 
    var time_length = quotes.length*(fadeIn_time + delay_time + fadeOut_time); 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(fadeIn_time) 
      .delay(delay_time) 
      .fadeOut(fadeOut_time , showNextQuote); 
    } 

    showNextQuote();  
//Slider 
    $('#news-container').vTicker({ 
     speed: 800, 
     pause: time_length, 
     animation: 'fade', 
     mousePause: false, 
     showItems: 1 
    });