Keyboard interaction
The Rotator property e-allowkeyboardnavigation 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 Keyboard Shortcut in the following table.
Keyboard shortcuts
KeyboardShortcut | Function |
Alt + j | Focuses the control |
UP | Navigates up and left. |
Down | Navigates down and right. |
Left | Navigates up and left. |
Right | Navigates down and right. |
Home | Navigates to the starting item. |
End | Navigates to the ending item. |
Enter | Selects the focused item |
You can refer the following code example for keyboard navigation.
<ul id="sliderContent" ej-rotator e-slideWidth="600px" e-slideHeight="350px" e-showPager="true" e-showCaption="true" e-showThumbnail="thumbnail" e-thumbnailSourceID="thumbnailId" e-showPlayButton="true" e-isResponsive="true">
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/green.jpg" title="green" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/snow.jpg" title="snow" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/wheat.jpg" title="wheat" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/tablet.jpg" title="tablet" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/sea.jpg" title="sea" /></li> </ul>
<ul id="thumbElement" style="display: none">
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/green.jpg" title="green" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/snow.jpg" title="snow" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/wheat.jpg" title="wheat" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/tablet.jpg" title="tablet" /></li>
<li><img class="image" src="http://js.syncfusion.com/demos/web/content/images/rotator/sea.jpg" title="sea" /></li> </ul>
</div>
<script>
angular.module('rotatApp', ['ejangular']).controller('RotatCtrl', function ($scope) {
});
$(function () {
//Control focus key
$(document).on("keydown", function (e) {
if (e.altKey && e.keyCode === 74) { // j- key code.
$("#slidercontent")[0].focus();
}
});
});
</script>
<style type="text/css" class="cssStyles">
.e-rotator-wrap .e-thumb .e-thumb-items li img {
width: 130px;
height: 82px;
}
</style>