Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Added Keyboard arrow left and right support #239

Closed
wants to merge 1 commit into from

6 participants

Alex Byrd Zoe Rooney Dario Devcic J.Y Han Eric Wafford semihozbag
Alex Byrd

Per my wife's (and user sscirrus else per issue #191) request, I've added keyboard shortcuts, defaulted to disabled for left and right arrows.

Zoe Rooney

Thanks for this, very helpful.

Dario Devcic

+1 This is great, thanks!

semihozbag

Hi there, nice add-on for bxslider. But have some issues with focused inputs or textareas. I've updated keydown section with the following code:

var activeElementTag = document.activeElement.tagName.toLowerCase();
var tagFilters='input|textarea';
var p = new RegExp(activeElementTag,["i"]);
var result = p.exec(tagFilters);
if (result == null) {
    if (e.keyCode == 39) {
        clickNextBind(e);
        return false;
    }
    else if (e.keyCode == 37) {
        clickPrevBind(e);
        return false;
    }
}

Cool stuff, thanks.

PS I actually adopted a different slider so I no longer use / maintain this. Looks like stevenwanderski doesn't maintain it much anymore, either though. Not sure which (if any) fork is "best" / in production ... hmm.

There are many versions of sliders, you know :/
But i love bx!! it's enough for just sliding and it's easy to use.. If more effects needed like css 3d, then it's time to say goodbye to bx (:
I've updated the keyboard navigation again with checking if the slider is in the viewport.
It was causing some different bugs if there is more than one slider with keyboard navigation enabled.

// Placed this code on the beginning of jquery.bxslider.js
$.fn.isOnScreen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

...
if (result == null && $(el).isOnScreen()) {
    if (e.keyCode == 39) {
...

Some more known bugs being resolved, :+1:
Love open source.

But yeah, I know there are active developments on the project -- I wish the owner would just officially pass off the project to one of the active developers (he has 52 pull requests pending, follow the tree down the path https://github.com/stevenwanderski/bxslider-4/network)

J.Y Han

thanks!

Eric Wafford Tidal-Wave added this to the 4.2 milestone
Eric Wafford
Collaborator

Hey guys, I've been added to the project to assist in maintaining it and bringing it back up to par. I appreciate the work done here and will look to add it to the first planned update after reviewing it further.

Eric Wafford Tidal-Wave self-assigned this
Eric Wafford
Collaborator

Added in 4.2.2

Eric Wafford Tidal-Wave closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 20 additions and 4 deletions.
  1. +20 −4 jquery.bxslider.js
24 jquery.bxslider.js
View
@@ -40,7 +40,10 @@
oneToOneTouch: true,
preventDefaultSwipeX: true,
preventDefaultSwipeY: false,
-
+
+ // KEYBOARD
+ keyboardEnabled: false,
+
// PAGER
pager: true,
pagerType: 'full',
@@ -106,8 +109,8 @@
var windowWidth = $(window).width();
var windowHeight = $(window).height();
-
-
+
+
/**
* ===================================================================================
* = PRIVATE FUNCTIONS
@@ -318,6 +321,19 @@
if (slider.settings.controls) updateDirectionControls();
// if touchEnabled is true, setup the touch events
if (slider.settings.touchEnabled && !slider.settings.ticker) initTouch();
+ // if keyboardEnabled is true, setup the keyboard events
+ if (slider.settings.keyboardEnabled && !slider.settings.ticker) {
+ $(document).keydown(function(e){
+ if (e.keyCode == 39) {
+ clickNextBind(e);
+ return false;
+ }
+ else if (e.keyCode == 37) {
+ clickPrevBind(e);
+ return false;
+ }
+ });
+ }
}
/**
@@ -954,7 +970,7 @@
}
slider.viewport.bind('touchstart', onTouchStart);
}
-
+
/**
* Event handler for "touchstart"
*
Something went wrong with that request. Please try again.