```
```javascript
// Navigation
move = {
right: '',
};
keyDown(e: any, cardWidth: number) {
const cardRealSize = cardWidth;
// Right arrow
if (e.keyCode === 39) {
// If not is infinite carousel and user is not on the last card
if (window.actualHorizontal < this.container.length - 1) {
window.actualHorizontal += 1;
// Move the css and focus next card
this.move.right = `${cardWidth * window.actualHorizontal}vw`;
}
}
// Left arrow
else if (e.keyCode === 37) {
// If not is infinite carousel and user is not on the first card
if (!this.isInfiniteCarousel && window.actualHorizontal > 0) {
window.actualHorizontal -= 1;
// Move the css and focus next card
this.move.right = `${cardWidth * window.actualHorizontal}vw`;
}
}
}
```
3. Use the `(keydown)` event on html `.focusable-element` elements for horizontal movement for *infinite carousels*
- The container is the list of elements that are rendered on the carousel
```html
```
```javascript
keyDown(e: any) {
// Right arrow
if (e.keyCode === 39) {
// Get first element and add it to last position (circular behaviour)
const firstElement = this.container?.shift();
this.container?.push(firstElement);
}
// Left arrow
else if (e.keyCode === 37) {
// Get last element and add it to first position (circular behaviour)
const lastElement = this.container?.pop();
this.container?.unshift(lastElement);
}
}
```
‼️ For a more detailed usage go to usage-examples/angular-example
```
npm install
npm start
Project should be running on http://localhost:4200/ or selected port
```
***
## ✅ Already tested on
***
- [X] Samsung (2017-2021)
- [X] LG (2017-2021)
- [X] Vizio (series D and V)
👉 Currently used on aha smarttvs platforms https://www.aha.video/
***
## 🔜 Comming Soon
***
- [ ] React implementation documentation and example
***
> © 2022, Andrea Amaya
[](https://opensource.org/licenses/MIT)
---
_Source: https://npm.io/package/css-navigation-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._