Keyboard interaction in EJ 1 ASP.NET MVC Rotator

23 Aug 2017 / 3 minutes to read

The AllowKeyboardNavigation property turns on keyboard interaction with the Rotator items. You must set this property to ‘true’ to access the keyboard shortcuts. The default value is ‘true’. The value set to this property is Boolean.

The entire Rotator commands are accessed through the keyboard by specifying the KeyboardShortcut in the following table.

Keyboard Shortcut Function
Alt + j Focuses the control
Up/ Right Move to next slide
Down/Left Move to previous slide.
Space Move to Play/Pause slide.
Alt + Right Move thumbnail item to right and select item.
Alt + Left Move thumbnail item to left and select item.
Enter Selected the thumbnail item

You can refer the following code example for keyboard navigation.

  • cshtml
  • // Add this code in your CSHTML page and refer local data section for binding Rotator items.
    <ul id="slide" style="display: none">    
    	<li> <img src="@Url.Content("~/Images/rotator/green.jpg")" title="Green" /> </li>    
    	<li> <img src="@Url.Content("~/Images/rotator/snow.jpg")" title="Snow" /> </li>    
    	<li> <img src="@Url.Content("~/Images/rotator/wheat.jpg")" title="Wheat" /> </li>    
    	<li> <img src="@Url.Content("~/Images/rotator/tablet.jpg")" title="Tablet" /> </li>    
    	<li>        <img src="@Url.Content("~/Images/rotator/sea.jpg")" title="Sea" /></li>    
    	<li>        <img src="@Url.Content("~/Images/rotator/bread.jpg")" title="Bread" /></li>
    @Html.EJ().Rotator("sliderContent").Items(itemElement =>  { 
    itemElement.Add().ContentTemplate(@<div> <img class="image" src="@Url.Content("~/Images/rotator/green.jpg")" /> </div>);                           
    itemElement.Add().ContentTemplate(@<div> <img class="image" src="@Url.Content("~/Images/rotator/snow.jpg")"/>  </div>);                           
    itemElement.Add().ContentTemplate(@<div> <img class="image" src="@Url.Content("~/Images/rotator/wheat.jpg")" />  </div>);                           
    itemElement.Add().ContentTemplate(@<div> <img class="image" src="@Url.Content("~/Images/rotator/tablet.jpg")" /> </div>);                           
    itemElement.Add().ContentTemplate(@<div> <img class="image" src="@Url.Content("~/Images/rotator/sea.jpg")" /> </div>);                           
    itemElement.Add().ContentTemplate(@<div> <img class="image" src="@Url.Content("~/Images/rotator/bread.jpg")" /> </div>);})
    <script type="text/JavaScript"> 
    	$(function () 
    	//Control focus key      
    	$(document).on("keydown", function (e) 
    		if (e.altKey && e.keyCode === 74) 
    			// j- key code.         

    Run the above sample, we get the output like this,