Reveal.js left and right arrows should navigate width keyboard and keep the ID's next to it

Question

My DEMO shows the navigation arrows navigate correctly ON CLICK but also with the (keyboard)cursor.

• The LEFT and RIGHT need to have the name of the section ID next to it!
• Works clicking the arrows
• Doesn't work with the keyboard (e.keyCode == 37)(e.keyCode == 39)

Reveal.js

• Also I want to appent the ID on left and right arrow.

  $('.navigate-right').html('<h3> '+ $(this).text(prevId) +' </h3>');

http://jsfiddle.net/3fJqZ/100/

Answer 1

You can use the slidechanged event to get what you are looking for:

Reveal.addEventListener( 'slidechanged', function( event ) {
    var currentSection = $('section.present');
    var nextId = currentSection.next('section').attr('id');

    $('.navigate-left').text($(event.previousSlide).attr('id'));

    $('.navigate-right').text(nextId);
} );

Working Plunkr here: http://jsfiddle.net/3fJqZ/109/