Keyboard navigation for cbp full width slider

Question

Had tried this JS-FIDDLE But did not succeed. Can some one help out, How to enable the keyboard navigation for this slider.

_toggleNavControls : function() {

        // if the current item is the first one in the list, the left arrow is not shown
        // if the current item is the last one in the list, the right arrow is not shown
        switch( this.current ) {
            case 0 : this.$navNext.show(); this.$navPrev.hide(); break;
            case this.itemsCount - 1 : this.$navNext.hide(); this.$navPrev.show(); break;
            default : this.$navNext.show(); this.$navPrev.show(); break;
        }
        // highlight navigation dot
        this.$navDots.eq( this.old ).removeClass( 'cbp-fwcurrent' ).end().eq( this.current ).addClass( 'cbp-fwcurrent' );

    }

Anyhelp would be greatly appreciated.

what do you mean with keyboard navigation ? do you want to control the slider by the arrows on the keyboard ?? — Anas Omar, Dec 29 '15 at 09:50
Absolutely ! I want to control my slides with keyboard and mouse. @Anas Omar — srinatht, Dec 29 '15 at 09:55

score 2 · Accepted Answer · answered Dec 29 '15 at 14:49

see demo

You need to bind a keydown event on document in _initEvents functions and watch the left and right arrow keys for being pressed:

$(document).keydown(keyHandler);

function keyHandler(event)  { 
        if (event.keyCode === 39) {

           if(self.$navNext.is(":visible")) self.$navNext.trigger("click.cbpFWSlider");
            return false;
          } else if (event.keyCode === 37) {
            if(self.$navPrev.is(":visible")) self.$navPrev.trigger("click.cbpFWSlider");
            return false;
          }

    };

P.S. In Jsfiddle do not forget to put focus in the preview area by clicking on it - the right bottom part, so the keys are being watched.

Keyboard navigation for cbp full width slider

1 Answers1