Eu tenho uma instância bastante flexível do Flexslider em que estou trabalhando.Flexslider incorpora bem com ojquery.mousewheel.js plugin, permitindo que os slides se movam nos eventos da roda do mouse.

No entanto, o Mac OSX e outros empregam 'intertia' nos efeitos de rolagem, tornando praticamente impossível rolar apenas um slide para a esquerda ou direita. O efeito geral é que mesmo o menor movimento de rolagem nessas situações aciona vários eventos da roda do mouse e rola o controle deslizante várias imagens para a esquerda ou direita. Obviamente, isso não pode acontecer!

Eu acho que a solução é usarunderscore.js - especificamente a função 'debounce'. No entanto, sou relativamente inexperiente em JS / jQuery e não consigo descobrir como implementá-lo.

Da documentação do sublinhado:

Debounce: _.debounce(function, wait, [immediate])

Cria e retorna uma nova versão remarcada da função passada, que adiará sua execução até que os milissegundos de espera tenham decorrido desde a última vez em que foi invocada. Útil para implementar comportamentos que só devem acontecer depois que a entrada parar de chegar. Por exemplo: renderizando uma visualização de um comentário do Markdown, recalculando um layout depois que a janela parou de ser redimensionada e assim por diante.

Passe true para o parâmetro imediato para fazer com que o debounce ative a função no início, em vez da borda final do intervalo de espera. Útil em circunstâncias como impedir que cliques acidentais em um botão "enviar" sejam acionados pela segunda vez.

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Aqui está o código que estou usando para inicializar o flexslider:

// MOUSEWHEEL FIX:

function debounceEffect() { // apply debounce to mousewheel here

}

// Initialize FlexSlider
$(window).load(function() {     
    $('div.flexslider').flexslider({
        animation:'slide',
        controlNav:true,
        mousewheel:true,
        pauseOnHover:true,
        direction:'horizontal',
        animationSpeed:500,
        slideshowSpeed:5000,
        after:debounceEffect
    });
});

Infelizmente, não consigo descobrir como aplicar a função debounce ao evento da roda do mouse. Acho que não entendo bem as partes móveis.

Aqui está obit relevante de código do plug-in flexslider:

    // MOUSEWHEEL:
    if (vars.mousewheel) {
      slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
        event.preventDefault();
        var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
        slider.flexAnimate(target, vars.pauseOnAction);
      });
    }

Posso editar isso para incluir alguns dos códigos de plug-in do mousewheel, se isso for importante, ou você pode conferirgithub.

Eu apreciaria qualquer ajuda sobre isso!