Navigation library for the lovers of css based on javascript😊
- Add the src files in the project
- Implement the
styles.scssat the root of the app - Initialize the main somewhere at the root of the app
import { init } from "../assets/src/main.js"; export class AppComponent { ... constructor() { init() // Initialize navigation library } }.focusable-element class wrapped by a .carousel-container class
.carousel-container-row class by row and all the rows should be wrapped by a .carousel-container class
| Global variable | Usage | Type of | Initial value |
|---|---|---|---|
| actualHorizontal | Actual index on horizontal position | Number | 0 |
| actualVertical | Actual index on vertical position | Number | 0 |
| isInNormalCarousel | Current carousel is horizontal or vertical | Boolean | true |
| isInGridCarousel | Current carousel is a grid | Boolean | false |
| actualGridRow | Actual index on grid row | Number | 0 |
| actualGridCell | Actual index on row cell | Number | 0 |
| childrenBetweenUp | Access a diferent carousel on way up | Boolean | false |
| childrenBetweenDown | Access a diferent carousel on way down | Boolean | false |
| childrenBetweenLeft | Access a diferent carousel on way left | Boolean | false |
| childrenBetweenRight | Access a diferent carousel on way right | Boolean | false |
| goBack | Go back key number | Number | 8 |
- Use the
(focus)event on html.carousel-containerelements to set the needed values for the type of carousel
<div class="carousel-container" (focus)="setCarouselType()"></div> /** * Navigation - .ts file */ setCarouselType(): void { window.isInGridCarousel = true; window.isInNormalCarousel = false; }- Use the
(keydown)event on html.focusable-elementelements for horizontal movement for normal carousels and set the[ngStyle]="move"
- The key down listens to the current key and updates the css
- The keyDown function receives the cardWidth to do the exact movement of the carousel
- The move attribute gets the movement to the right of the carousel
<div class="carousel-container"> <div tabindex="0" class="focusable-element" (keydown)="keyDown($event, cardWidth)" [ngStyle]="move" > <div class="card" [style.backgroundColor]="color"> <h1>{{color}}</h1> </div> </div> // 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`; } } }- Use the
(keydown)event on html.focusable-elementelements for horizontal movement for infinite carousels
- The container is the list of elements that are rendered on the carousel
<div class="carousel-container"> <div tabindex="0" class="focusable-element" (keydown)="keyDown($event)" > <div class="card" [style.backgroundColor]="color"> <h1>{{color}}</h1> </div> </div> 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); } }npm install npm start Project should be running on http://localhost:4200/ or selected port - Samsung (2017-2021)
- LG (2017-2021)
- Vizio (series D and V)
👉 Currently used on aha smarttvs platforms https://www.aha.video/
- React implementation documentation and example
© 2022, Andrea Amaya
