/** | |
* 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); |
add new params in bxSlider options "mouseDrag" and set this "true"
Any example to show ?
Nothing is happening...
any reference...
This doesnt work... :(
it's working perfectly
Thanks
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?
On the Desktop there is no effect by using the MouseMove!