Использование плагина jQuery Cycle с плагином ScrollTo

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

Вы будете делать то, что вы хотите в опции цикла before

// 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/