cbp 全宽滑块的键盘导航
Keyboard navigation for cbp full width slider
已经试过了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' );
}
任何帮助将不胜感激。
需要在_initEvents函数中绑定document的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;
}
};
P.S。在 Jsfiddle 中,不要忘记通过单击将焦点放在预览区域 - 右下部分,以便观察按键。
已经试过了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' );
}
任何帮助将不胜感激。
需要在_initEvents函数中绑定document的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;
}
};
P.S。在 Jsfiddle 中,不要忘记通过单击将焦点放在预览区域 - 右下部分,以便观察按键。