[Resolved] views slider navigation using keys (keyboard left and right arrows)

[Author]

Posts

[stuart]

I have a view that is basically a power point presentation replica, wheat I would like to be able to do is have the view navigable by either the left and right keyboard arrows for the pagination. ad or the mouse scroll wheel if that is what they want.

is this possible?

thanks

[Minesh]

Hello. Thank you for contacting the Toolset support.

Updated:
I have discuss this again and it seems you are using the classic views not blocks and to add such feature that supports keyboaard left and right arrows you will have to write the custom javascript code.

[stuart]

I found a solution, it does not give the same transition effect and feels slower than if i used the native click navigation, but here it is in case anyone else needs it.

jQuery(document).ready(function($){
<!-- Start of Function -->
$(document).keydown(function(e) {
  var prevPageLink = $( ".js-wpv-pagination-previous-link" ).attr('href');
  var nextPageLink = $( ".js-wpv-pagination-next-link" ).attr('href');
  switch(e.which) {
    case 37:
      if ( prevPageLink ) {
        window.location = prevPageLink;
      }
      break;

    case 39:
      if ( nextPageLink ) {
        window.location = nextPageLink;
      }
      break;

    default: return;
  }
  e.preventDefault();
});

<!-- END of Function -->
}); 

[stuart]

in-case anyone else needs to save time here is what i managed... its not got the same slide transition for some reason and there feels like a lag that i am going to try and work out...but it does work.

jQuery(document).ready(function($){
<!-- Start of Function -->
$(document).keydown(function(e) {
  var prevPageLink = $( ".js-wpv-pagination-previous-link" ).attr('href');
  var nextPageLink = $( ".js-wpv-pagination-next-link" ).attr('href');
  switch(e.which) {
    case 37:
      if ( prevPageLink ) {
        window.location = prevPageLink;
      }
      break;

    case 39:
      if ( nextPageLink ) {
        window.location = nextPageLink;
      }
      break;

    default: return;
  }
  e.preventDefault();
});

<!-- END of Function -->
});