ScrollTo 플러그인과 함께 jQuery Cycle 플러그인 사용

Question

.cycle 플러그인을 사용하여 이미지를 전환합니다. 내 호출기에 scrollTo 플러그인 설정이 있습니다. .click 함수로 스크롤하지만 순환하면서 스크롤하지 않습니다. 페이저를 매 사이클마다 스크롤하려면 어떻게해야합니까?

 $(document).ready(init); 

     function init() { 
    var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013']; 
    // dynamically add a div to hold the slideshow's pager 
    $("#allCardContainer").before('<div id="pager"></div>'); 

    // now to use the cycle plugin 
    $("#allCardContainer").cycle({ 
     pause: 1, 
     pager: "#pager", 
     pagerAnchorBuilder: function (index) { 
      return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>'; 

     } 

    }); 



    $(".scroll").click(function (event) { 
     event.preventDefault(); 
     $('#allCardContainer').cycle('pause'); 
     $('#pager').scrollTo($(this), 1500, { axis: 'x', offset:-50 }); 
    }); 


} 

따라서 코드는 호출기 div를 만들고 이미지를 순환합니다. 두 번째 함수는주기를 일시 중지하고 호출기를 왼쪽으로 스크롤합니다. 선택한 페이저 div가 항상 같은 위치에 있고 항상 표시되도록 모든주기마다 해당 스크롤을 실행하려면 어떻게해야합니까?

편집 :

이걸하려고하면 내 클릭이 잘 작동하지만, 호출기주기 동안 스크롤되지 않습니다.

$(document).ready(init); 

function init() { 
    var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013']; 
    // dynamically add a div to hold the slideshow's pager 
    $("#allCardContainer").before('<div id="pager"></div>'); 

    // now to use the cycle plugin 
    $("#allCardContainer").cycle({ 
     pause: 1, 
     pager: "#pager", 
     pagerAnchorBuilder: function (index) { 
      return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>'; 
     }, 
     before: slideScroll(false) 
    }); 

    function slideScroll(clicked) { 
     if (clicked) { 
      //$('#allCardContainer').cycle('pause'); 
      $('#pager').scrollTo($('.activeSlide'), 1500, { axis: 'x', offset: -83 }); 
     } 
     else { 
      $('#pager').scrollTo($('.activeSlide'), 1500, { axis: 'x', offset: -20 }); 
      alert('sliding'); 
     } 
    } 

    $(".scroll").click(function(event){   
     slideScroll(true); 
    }); 
} 

Answer 1

당신은 사이클의 전에 옵션에서 당신이 원하는 일을 할 예정

// now to use the cycle plugin 
$("#allCardContainer").cycle({ 
    pause: 1, 
    pager: "#pager", 
    pagerAnchorBuilder: function (index) { 
     return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>'; 
    }, 
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) { 
     // Do stuff here. 
    } 

}); 

http://jquery.malsup.com/cycle/options.html

편집 :

는이 작업을 수행 :

$(document).ready(init); 

function init() { 
    var titles = ['1913', '1918', '1927', '1935', '1950', '1963', '1977', '1980', '1983', '1986', '1987', '1988', '1988-1999', '1990', '1992', '1993', '1993-1995', '1994', '1995', '1999', '1999', '2000', '2003', '2003', '2003', '2003', '2006', '2007-2008', '2011', '2011', '2013']; 
    // dynamically add a div to hold the slideshow's pager 
    $("#allCardContainer").before('<div id="pager"></div>'); 

    // now to use the cycle plugin 
    $("#allCardContainer").cycle({ 
    pause: 1, 
    pager: "#pager", 
    pagerAnchorBuilder: function (index) { 
     return '<a class="scroll" id="link' + [index] + '" href="#' + [index] + '">' + titles[index] + '</a>'; 
    }, 
    before: function() { 
     if($('.activeSlide').length > 0) { 
     $("#pager").scrollTo($('.activeSlide'), 1500, { axis: 'x', offset:-50 }); 
     } 
    } 
    }); 

    $(".scroll").click(function(event) { 
    event.preventDefault(); 
    $('#allCardContainer').cycle('pause'); 
    $('#pager').scrollTo($(this), 1500, { axis: 'x', offset:-50 }); 
    }); 
} 

http://jsfiddle.net/xFMhA/