Carousel using Markdown in Kibana Canvas

workpad.json

{
  "css": ".canvasPage {\n\n}",
  "id": "workpad-437c9656-65f8-4078-9569-a3fa6b53cdaf",
  "name": "Carousel in Markdown",
  "width": 1080,
  "height": 720,
  "page": 0,
  "pages": [
    {
      "id": "page-b58842df-918e-4580-91fe-5890fa735703",
      "style": { "background": "#FFF" },
      "transition": {},
      "elements": [
        {
          "id": "element-285ba5c5-4eb2-4432-957d-d993056db88a",
          "position": {
            "left": 20,
            "top": 20,
            "width": 300,
            "height": 201,
            "angle": 0,
            "parent": null
          },
          "expression": "markdown \n  \"This would be slide one\n\nThis would be slide two\n\nThis would be slide three\n\nThis would be slide four\"\n| render containerStyle={containerStyle} \n  css=\".canvasRenderEl {\n  background: #efefef;\n  overflow: hidden;\n  height: 200px !important;\n  width: 300px !important;\n  margin: 0 auto;\n}\n\n.canvasRenderEl .canvasMarkdown {\n  width: 1200px;\n  -webkit-animation: slide 18s ease infinite;\n}\n\n.canvasRenderEl p {\n  float: left;\n  height: 200px;\n  width: 300px;\n  text-align: center;\n  font-size: 1.5em;\n  line-height: 200px;\npadding: 0;\n}\n\n.canvasRenderEl p:nth-child(1) {\n  background: #D93B65;\n}\n\n.canvasRenderEl p:nth-child(2) {\n  background: #037E8C;\n}\n\n.canvasRenderEl p:nth-child(3) {\n  background: #36BF66;\n}\n\n.slide-number {\n  color: #000;\n  text-align: center;\n  font-size: 10em;\n}\n\n@-webkit-keyframes slide {\n  20% {margin-left: 0px;}\n  30% {margin-left: -300px;}\n  50% {margin-left: -300px;}\n  60% {margin-left: -600px;}\n  70% {margin-left: -600px;}\n  80% {margin-left: -900px;}\n  90% {margin-left: -900px;}\n}\""
        }
      ],
      "groups": []
    }
  ],
  "colors": [
    "#37988d",
    "#c19628",
    "#b83c6f",
    "#3f9939",
    "#1785b0",
    "#ca5f35",
    "#45bdb0",
    "#f2bc33",
    "#e74b8b",
    "#4fbf48",
    "#1ea6dc",
    "#fd7643",
    "#72cec3",
    "#f5cc5d",
    "#ec77a8",
    "#7acf74",
    "#4cbce4",
    "#fd986f",
    "#a1ded7",
    "#f8dd91",
    "#f2a4c5",
    "#a6dfa2",
    "#86d2ed",
    "#fdba9f",
    "#000000",
    "#444444",
    "#777777",
    "#BBBBBB",
    "#FFFFFF",
    "rgba(255,255,255,0)"
  ],
  "isWriteable": true,
  "assets": {},
  "@timestamp": "2019-07-03T16:48:07.754Z",
  "@created": "2019-07-03T16:36:22.269Z"
}