Блог

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

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

Функциональность, которую я ищу, такая же, как переходы scrollHorz / scrollVert.

Я понимаю, что мне нужна некоторая логика, чтобы связать текущий кадр и следующий кадр: if (frameclicked on имеет более высокий индекс, чем текущий слайд) {анимировать слева} 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)   ')';
        }

});
  

Вам нужно подключиться к 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'); 
        }
    }

}); 
  

});

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

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

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