Timeline 18

ImageSliderButtonsBackground Image117 nodes · 43 styles

Description

Horizontal timeline carousel with centered header, navigation arrows, three visible entry cards featuring image placeholders, date markers on progress line, and descriptions below

Detailed Analysis

This timeline combines a centered header with an image-rich horizontal carousel. Each visible entry includes a tall image placeholder above the horizontal progress line, followed by date label and description below. Left and right navigation arrows enable scrolling through additional entries. Three entries are visible at once. The image placeholders add visual richness suitable for showcasing products, events, or project phases.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

timeline carouselimage timelinehorizontal timelinenavigation arrowsslider timelinedate markersimage cardsmilestoneschronologicalbrowsable timelinemedia timelinethree columnsinteractive timelinevisual history

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [],
      "actionLists": [],
      "interactions": []
    },
    "nodes": [
      {
        "_id": "375c43d4-4fac-904f-2688-b2ecd3d9c8c2",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b5b5227d-6bca-4528-1fb6-1b729b33cdc4"
        ],
        "children": [
          "375c43d4-4fac-904f-2688-b2ecd3d9c8c3"
        ]
      },
      {
        "_id": "375c43d4-4fac-904f-2688-b2ecd3d9c8c3",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b0934d9a-875a-bb42-0630-12090a77fc73"
        ],
        "children": [
          "375c43d4-4fac-904f-2688-b2ecd3d9c8c4"
        ]
      },
      {
        "_id": "375c43d4-4fac-904f-2688-b2ecd3d9c8c4",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [], "actionLists": [], "interactions": [] }, "nodes": [ { "_id": "375c43d4-4fac-904f-2688-b2ecd3d9c8c2", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "b5b5227d-6bca-4528-1fb6-1b729b33cdc4" ], "children": [ "375c43d4-4fac-904f-2688-b2ecd3d9c8c3" ] }, { "_id": "375c43d4-4fac-904f-2688-b2ecd3d9c8c3", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "b0934d9a-875a-bb42-0630-12090a77fc73" ], "children": [ "375c43d4-4fac-904f-2688-b2ecd3d9c8c4" ] }, { "_id": "375c43d4-4fac-904f-2688-b2ecd3d9c8c4", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false ... (truncated)