Keyboard interaction

23 Aug 20173 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>
</ul>

@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>);})

.SlideWidth("600px").SlideHeight("350px")
.ShowThumbnail(true).ThumbnailSourceID("slide")
.AllowKeyboardNavigation(true).ShowPlayButton(true)  



<script type="text/JavaScript"> 
   
	$(function () 
	{   
	 
	//Control focus key      

	$(document).on("keydown", function (e) 
	{   

		if (e.altKey && e.keyCode === 74) 

		{ 

			// j- key code.         
			
			$("#sliderContent")[0].focus();    
			
		}        
		
	});    
	});

</script>

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