Keyboard interaction

10 Apr 20171 minute to read

The allow-keyboard-navigation 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.

<ej-rotator id="rot" datasource="ViewBag.datasource" slide-height="350px"  is-responsive="true" allow-keyboard-navigation="true" show-play-button="true" show-thumbnail="true">
    <e-rotator-fields text="text" url="url" />
</ej-rotator>


<script type="text/JavaScript">


	$(function ()
	{

	//Control focus key

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

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

		{

			// j- key code.

		    $("#rot")[0].focus();

		}

	});
	});

</script>

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