Слайд-шоу цикла jquery - добавление предыдущей / следующей последовательности слайдов (в стиле scrollHorz) вместе с пользовательской анимацией - PullRequest
Новая
       33

Слайд-шоу цикла jquery - добавление предыдущей / следующей последовательности слайдов (в стиле scrollHorz) вместе с пользовательской анимацией

2 голосов
/ 18 апреля 2011

Я использую плагин цикла jquery с пользовательской анимацией.Это прекрасно работает!

Однако мне бы хотелось, чтобы слайды двигались вправо или влево в зависимости от индекса #, т. Е. Если пользователь нажимает на ссылку 1, а слайд № 3 является активным слайдом, анимация будетпереход вправо, в то время как если щелкнуть ссылку 4 на слайде, произойдет переход влево.

Требуемая функциональность аналогична переходам scrollHorz / scrollVert.

Я понимаю, что мне нужна некоторая логика, чтобы связать текущий кадр и следующий кадр: if (щелчок по кадру является более высоким индексом, чем текущий слайд) {анимировать влево} else {анимировать вправо}

Я просто не знаю, где поместить это в коде.Я надеюсь, что в этом есть смысл.Любая помощь будет принята с благодарностью!Спасибо!

Не то чтобы это, вероятно, помогло, но мой пользовательский код приведен ниже. 

$('#s4').before('<div id="nav" class="nav">').cycle({
    fx:     'custom',

    cssBefore:{
            left:1000,
            opacity:0,
            display:'block'
        },
    animIn:{
            left:0,
            opacity:100
        },
    animOut:{
            left:-1000,
            opacity:0
        },
    cssAfter:{
            display:'none'
        },
    speed:  'slow',
    easeIn: 'easeInExpo',
    easeOut: 'easeInExpo',
    next: '.nextnav',
    prev: '.previous',
    timeout: 0,
    containerResize: 1,
    fit: 0,
    height: 600,
    pager: '#slideshow-nav',
    pagerAnchorBuilder: function(idx, slide) {
            return '#slideshow-nav li:eq(' + (idx) + ')';
        }

});

Ответы [ 2 ]

4 голосов
/ 18 апреля 2011

Вам нужно подключиться к onPrevNextEvent. У них есть что-то под названием isnext, которое проходит мимо, которое в основном говорит вам, в каком направлении вы движетесь.

Пример. Я обновил скрипку, которую вчера взбил для цикла.

http://jsfiddle.net/gx3YE/12/

$(function() {

$('#megaWrapper').cycle({
    next : "#next",
    prev : "#prev",
    timeout : 0,
    onPrevNextEvent: function(is,i,el) {
        if (is === true) {
            alert('slide right');
        }
        else {
            alert('slide left'); 
        }
    }

});

}); * +1011 *

2 голосов
/ 15 июня 2011

Разве не то, что вы описываете, является частью основной функциональности Cycle?

Вот как я это делаю: 

$('.slideshow').cycle({
    fx: 'scrollHorz',
    timeout: 0,
    next:   '#next', 
    prev:   '#prev'     
});
...