Как сделать переключение слайдов в bxslider с помощью Apple Magic Mouse и Apple Magic Trackpad?

Question

[Mike]

Здравствуйте.

Использую bxslider для реализации вертикального слайдера. Дело в том, что для реализации переходов по слайдам недостаточно вызывать события слайлдера, потому что правильно работает это только с обычными мышками. На устройствах Apple прокручивается сразу несколько слайдов.

Прошу помощи, как решить этот вопрос. Ниже листинг простой реализации без оглядки на Apple

// SLIDER : begin
$(document).ready(function(){

    var $slider = $("#content-page.cobra");

    var slider = $slider.bxSlider({
        mode: 'vertical',
        slideMargin: 0,
        video: true,
        pager: false,
        infiniteLoop: false,
        controls: false
    });

    $slider.on('mousewheel', function(event, delta, deltaX, deltaY) {

        if (delta >= 0) {
            slider.goToPrevSlide();
        }

        if (deltaY <= 0){
            slider.goToNextSlide();
        }

        event.stopPropagation();
        event.preventDefault();

    });
    
});
// SLIDER : end

Answer 1

[Mike]

Решение:

$(document).ready(function(){

    // SLIDER : begin
    var $slider = $("#content-page.cobra");

    var slider = $slider.bxSlider({
        mode: 'vertical',
        slideMargin: 0,
        // video: true,
        pager: false,
        infiniteLoop: false,
        controls: false,
        adaptiveHeight: true
    });

    // scroll : begin
    var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
    
    // if OS === Mac OS X
    if(isMac){

        isMoving = false;
        $slider.on('mousewheel', function(e) {

            if (e.deltaY > 1) {
                if (!isMoving) {
                    isMoving = true; 
                    slider.goToPrevSlide();
                }

            }

            else if (e.deltaY < -1) {
                if (!isMoving) {
                    isMoving = true;
                    slider.goToNextSlide();
                }
            }

            else { isMoving = false; }

            event.stopPropagation();
            event.preventDefault();

        });
    }

    // other OS
    else{
        $slider.on("mousewheel", function(event, delta, deltaX, deltaY) {

            //console.log(event, delta, deltaX, deltaY);

            if (delta > 0) {
                slider.goToPrevSlide();
            }
            if (deltaY < 0){
                slider.goToNextSlide();
            }
            event.stopPropagation();
            event.preventDefault();

        });
    }
    // scroll : end
    // SLIDER : end
        
});