Skip to content

Instantly share code, notes, and snippets.

@connected

connected/bxslider-drag.js

Last active October 12, 2022 23:37
Download ZIP

Revisions

  1. connected revised this gist Jul 19, 2016. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions bxslider-drag.js
    View file
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@

    function mouseMoveHandler(e) {

    if (posX < event.pageX) {
    if (posX < e.pageX) {
    slider.goToPrevSlide();
    } else {
    slider.goToNextSlide();
    @@ -50,5 +50,4 @@
    return slider;
    };

    })(jQuery);

    })(jQuery);
  2. connected created this gist Jul 19, 2016.
    54 changes: 54 additions & 0 deletions bxslider-drag.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    /**
    * 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 < event.pageX) {
    slider.goToPrevSlide();
    } else {
    slider.goToNextSlide();
    }

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

    return slider;
    };

    })(jQuery);