cbp 全宽滑块的键盘导航答案

【问题标题】：Keyboard navigation for cbp full width slidercbp 全宽滑块的键盘导航
【发布时间】：2016-04-03 01:26:07
【问题描述】：

试过这个JS-FIDDLE 但没有成功。有人可以帮忙吗，如何为此滑块启用键盘导航。

_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' );

    }

任何帮助将不胜感激。

【问题讨论】：

键盘导航是什么意思？你想通过键盘上的箭头来控制滑块吗？？
绝对！我想用键盘和鼠标控制我的幻灯片。 @Anas Omar

标签： javascript jquery css slider keyboard-navigation

【解决方案1】：

see demo

你需要在 _initEvents 函数中为文档绑定一个 keydown 事件，并观察左右方向键是否被按下：

$(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;
          }

    };

附：在 Jsfiddle 中，不要忘记通过单击将焦点放在预览区域 - 右下部分，因此正在监视键。

【讨论】：