Bricks Auto-Playing Logo Carousel

Property	Value
description	Bricks JSON export for an auto-playing logo carousel component group.
tags	lib, json, wp, bricks
rating

Human: 3 - Mixed authorship

Roughly half AI, half human. Core content reviewed, but minor risk remains.

Overview

Bricks JSON export for an auto-playing logo carousel component group.

The export contains three Bricks components:

• MAC Logos Section Alpha
• MAC Logo List Alpha
• MAC Logo Charlie

Import the JSON through Bricks' template/component import workflow. This is a Bricks export, not a PHP snippet.

Variants

Default

Add Macro

Add wp-bricks-auto-playing-logo-carousel macro.

{
  "content": [
    {
      "id": "yxqxpp",
      "name": "section",
      "parent": 0,
      "children": [],
      "settings": {},
      "cid": "dygroe",
      "properties": { "aiignz": "--quantity:{query_results_count:yaixyb-engjcg};" },
      "label": "MAC Logos Section Bravo",
      "slotChildren": {
        "fxsdrx": [
          "durwtv",
          "arvnti",
          "ltgsxo",
          "rtqpzi",
          "mhfzep",
          "nssssy",
          "cvzneh",
          "kaciqd",
          "uokktk",
          "mvxmbh",
          "engjcg",
          "vacvcf",
          "lwfoid",
          "znlgjy"
        ]
      }
    }
  ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://exotics.allphasemedia.dev",
  "version": "2.2",
  "components": [
    {
      "id": "dygroe",
      "category": "",
      "desc": "",
      "elements": [
        {
          "id": "dygroe",
          "name": "section",
          "parent": 0,
          "children": ["iosayr"],
          "settings": {
            "_cssGlobalClasses": ["jtzuvv"],
            "_attributes": [
              {
                "id": "vlfdur",
                "name": "style",
                "value": "--quantity:{query_results_count:yaixyb-engjcg};"
              },
              { "id": "bfefoi", "name": "aria-hidden", "value": "true" }
            ]
          },
          "label": "MAC Logos Section Bravo"
        },
        {
          "id": "iosayr",
          "name": "container",
          "parent": "dygroe",
          "children": ["fxsdrx"],
          "settings": { "_cssGlobalClasses": ["xvxitk"] },
          "label": "Inner"
        },
        {
          "id": "fxsdrx",
          "name": "slot",
          "parent": "iosayr",
          "children": [],
          "settings": [],
          "label": "List"
        }
      ],
      "properties": [
        {
          "label": "Style",
          "type": "text",
          "default": "--quantity:{query_results_count:yaixyb-engjcg};",
          "id": "aiignz",
          "connections": { "dygroe": ["_attributes|vlfdur|value"] }
        }
      ],
      "_created": 1772198983,
      "_user_id": 1,
      "_version": "2.2"
    }
  ],
  "globalClasses": [
    {
      "id": "jtzuvv",
      "name": "mac-logos-section-bravo",
      "settings": {
        "_cssCustom": ".mac-logos-section-bravo {\n  --list-gap: var(--grid-gap);\n  --logo-gap: var(--grid-gap);\n  --animation-duration: 180s;\n\n  /* 0..1 fraction of the cycle to shift the start position */\n  --phase-odd: 0;\n  --phase-even: 0.3; /* tweak this until the even row starts “filled” */\n\n  --fade-size: 10%;\n\n  position: relative;\n  overflow: hidden;\n  padding-block: var(--section-space-s);\n\n  -webkit-mask-image: linear-gradient(\n    to right,\n    transparent 0%,\n    black var(--fade-size),\n    black calc(100% - var(--fade-size)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    transparent 0%,\n    black var(--fade-size),\n    black calc(100% - var(--fade-size)),\n    transparent 100%\n  );\n}\n\n.mac-logos-section-bravo__inner {\n  display: grid;\n  row-gap: var(--list-gap);\n  grid-column: full;\n}\n\n.mac-logos-section-bravo__inner > ul.mac-logo-list-alpha {\n  display: flex;\n  gap: var(--logo-gap);\n  width: max-content;\n  min-width: 200%;\n  will-change: transform;\n  animation: logos-scroll var(--animation-duration) linear infinite;\n}\n\n/* odd: left */\n.mac-logos-section-bravo__inner > ul.mac-logo-list-alpha:nth-of-type(odd) {\n  animation-delay: calc(var(--animation-duration) * -1 * var(--phase-odd));\n}\n\n/* even: right */\n.mac-logos-section-bravo__inner > ul.mac-logo-list-alpha:nth-of-type(even) {\n  animation-direction: reverse;\n  animation-delay: calc(var(--animation-duration) * -1 * var(--phase-even));\n}\n\n@keyframes logos-scroll {\n  from { transform: translateX(0); }\n  to { transform: translateX(-50%); }\n}\n\n@media (max-width: 768px) {\n  .mac-logos-section-bravo {\n    --fade-size: 5%;\n  }\n}"
      },
      "modified": 1772205123,
      "user_id": 1
    },
    { "id": "xvxitk", "name": "mac-logos-section-bravo__inner", "settings": [] }
  ]
}