Keyboard interaction

The Rotator property 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 component
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.

HTML

<ul id="sliderContent" ej-rotator slideWidth="500px" slideHeight="350px" [enabled]="true" [showThumbnail]="true" thumbnailSourceID="thumbElement" [allowKeyboardNavigation]="true"
        [showPlayButton]="true" [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>

CSS

<style type="text/css" class="cssStyles">
       .e-rotator-wrap .e-thumb .e-thumb-items li img {
        width: 130px;
        height: 82px;
    }
</style>