Skip to content

Background carousel

Display Carousel with background image with animation.Show a Carousel based on dispatches data.

Attributes

  • options
    • query - Provide a Dispatch query
    • switchMode - "fade" | "cascade". Display a Carousel effect based on switchMode.
    • layoutId - Provide a layout id to be display layout within a Carousel.
    • mapping - [Object]
      • Provide an object to map with dispatches values.
    • styles - Provide a styles for card widgets
    • classes - Provide a classes for card widgets

Example

{
  "target": "background-carousel",
  "icon": "far fa-star text-warning",
  "options": {
    "query": "given trackers [project-details] asc",
    "id": "ce3b0915-9d02-4073-8986-1d0f3f51ba08",
    "layoutId": "bfa6916a-68a9-475e-9f45-1ff3ab7ccc65",
    "switchMode": "fade",
    "mapping": {
      "backgroundColor": "bgcolor",
      "foregroundColor": "fgcolor",
      "shape": "shape",
      "url": "shapeUrl",
      "title": "title",
      "subtitle": "area",
      "icon": "icon wemori-pin"
    },
    "classes": {
      "subtitle": "d-flex"
    },
    "title": {
      "line1": "",
      "line2": "",
      "icon": ""
    },
    "styles": {
      "title": {
        "fontSize": "28px",
        "fontFamily": "\"Noir Pro Bold\", sans-serif",
        "lineHeight": "28px",
        "padding": "25px 15px 0 15px",
        "color": "#fff"
      },
      "subtitle": {
        "padding": "0 15px",
        "color": "#fff"
      },
      "subtitleIcon": {
        "fontSize": "28px",
        "lineHeight": "28px",
        "flex": "0 0 34px"
      },
      "subtitleText": {
        "fontSize": "14px",
        "lineHeight": "14px",
        "flex": "1"
      },
      "wrapper": {
        "width": "calc(100% - -3px)",
        "height": "auto",
        "marginLeft": "-2px",
        "background": "#fff"
      },
      "mainWrapper": {
        "border": "7px solid #fff",
        "borderBottom": "none"
      }
    }
  },
  "title": "Carousel3",
  "name": "Carousel3",
  "_id": "42"
}