Content Navigator

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 53,
  "width": 254,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation",
          "href": "='#tool_' + @rowIndex"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])",
                "style": {
                  "text-align": "center"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "id": "='tool_' + @rowIndex"
    },
    "style": {
      "display": "block",
      "height": "240px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "font-size": "32px",
              "font-weight": "bold",
              "flex-grow": "1"
            }
          },
          {
            "elmType": "a",
            "attributes": {
              "iconName": "ChromeBack",
              "href": "='#tool_' + (@rowIndex - 1)",
              "title": "Previous",
              "class": "ms-fontColor-themeLight ms-fontColor-themePrimary--hover"
            },
            "style": {
              "font-size": "18px",
              "text-decoration": "none",
              "padding": "8px",
              "display": "=if(@rowIndex == 0, 'none', 'inherit')"
            }
          },
          {
            "elmType": "a",
            "attributes": {
              "iconName": "ChromeBackMirrored",
              "href": "='#tool_' + (@rowIndex + 1)",
              "title": "Next",
              "class": "ms-fontColor-themeLight ms-fontColor-themePrimary--hover"
            },
            "style": {
              "font-size": "18px",
              "text-decoration": "none",
              "padding": "8px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "txtContent": "[$Content]",
        "style": {
          "font-size": "18px"
        }
      }
    ]
  }
}