bxSlider mouse drag extension

bxslider-drag.js

/**
 * Include this code right after bxSlider.
 * Use "mouseDrag" options upon bxSlider initialization to enable mouse drag:
 * $('#slider').bxSlider({
 *     mouseDrag: true
 * });
 */
(function ($) {

    var bxSlider = jQuery.fn.bxSlider;
    var $window = $(window);

    jQuery.fn.bxSlider = function () {

        var slider = bxSlider.apply(this, arguments);

        if (!this.length || !arguments[0].mouseDrag) {
            return slider;
        }

        var posX;
        var $viewport = this.parents('.bx-viewport');

        $viewport
            .on('dragstart', dragHandler)
            .on('mousedown', mouseDownHandler);

        function dragHandler(e) {
            e.preventDefault();
        }

        function mouseDownHandler(e) {

            posX = e.pageX;

            $window.on('mousemove.bxSlider', mouseMoveHandler);
        }

        function mouseMoveHandler(e) {

            if (posX < e.pageX) {
                slider.goToPrevSlide();
            } else {
                slider.goToNextSlide();
            }

            $window.off('mousemove.bxSlider');
        }

        return slider;
    };

})(jQuery);

Perfect. Thanks dude!
I added the CSS for the particular element to disable the selection while moving:
{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;-ms-user-select: none; user-select: none; cursor:pointer; cursor:hand;}

It doesn't work on google chorme when i drag two slide move
In firefox perfectly fine

It works, but it works only with one-click inside the slider, there is a bug when you click and hold and try actually to drag the slides - the text gets selected. How can I prevent this to happen?

It works well but when you resize the window it doesn't work anymore.
any solution for it?