Bricks Remote Slider Buttons

template.json

{"content":[{"id":"chbcen","name":"section","parent":0,"children":["dssnom"],"settings":{}},{"id":"dssnom","name":"container","parent":"chbcen","children":["ipncxv"],"settings":{"_display":"grid","_gridGap":"1rem","_gridTemplateColumns":"repeat(2, minmax(0, 1fr))"}},{"id":"dbe55a","name":"block","parent":"ipncxv","children":["771f25","909e90","a7136e","iwrkdr","2686bd"],"settings":{"_direction":"row","_cssGlobalClasses":["mkgizl"],"_attributes":[{"id":"jlzjql","name":"data-wpe-splide-id","value":"brxe-oennwd"},{"id":"hsqwec","name":"aria-role","value":"tablist"}],"tag":"ul"},"label":"WPE Splide Buttons"},{"id":"771f25","name":"div","parent":"dbe55a","children":["693011"],"settings":{"tag":"li","_cssGlobalClasses":["etqxgn"],"_attributes":[{"id":"bvagrz","name":"role","value":"presentation"}]},"label":"LI"},{"id":"693011","name":"button","parent":"771f25","children":[],"settings":{"text":"About","style":"primary","_cssGlobalClasses":["bggreh"],"tag":"button","_attributes":[{"id":"wycehu","name":"role","value":"tab"}]}},{"id":"909e90","name":"div","parent":"dbe55a","children":["27b4f4"],"settings":{"tag":"li","_cssGlobalClasses":["etqxgn"],"_attributes":[{"id":"ltjzvm","name":"role","value":"presentation"}]},"label":"LI"},{"id":"27b4f4","name":"button","parent":"909e90","children":[],"settings":{"text":"Process","style":"primary","_cssGlobalClasses":["bggreh"],"tag":"button","_attributes":[{"id":"moyfbc","name":"role","value":"tab"}]}},{"id":"a7136e","name":"div","parent":"dbe55a","children":["2cf379"],"settings":{"tag":"li","_cssGlobalClasses":["etqxgn"],"_attributes":[{"id":"mzcqgh","name":"role","value":"presentation"}]},"label":"LI"},{"id":"2cf379","name":"button","parent":"a7136e","children":[],"settings":{"text":"Promo","style":"primary","_cssGlobalClasses":["bggreh"],"tag":"button","_attributes":[{"id":"dwndbl","name":"role","value":"tab"}]}},{"id":"2686bd","name":"code","parent":"dbe55a","children":[],"settings":{"code":"<script>\n(() => {\n    const SCRIPT_NAME = 'wpeSplideButtons';\n    const controlWrapperSelector = '.wpe-splide-buttons';\n\n    /* use wpeData to track any of our scripts */\n    /* If this is the first script, define wpeData */\n    if (undefined === window.wpeData) { window.wpeData = []; }\n    /* If no scripts have run, define wpeData.scripts */\n    if (undefined === window.wpeData.scripts) { window.wpeData.scripts = []; }\n\n    /* If window.wpeData.splideControls has not been defined, define it. */\n    if (undefined === window.wpeData.splideControls) { window.wpeData.splideControls = {}; }\n\n    /* If this script has already run, simply return and do not execute */\n    if (undefined !== window.wpeData.scripts[SCRIPT_NAME]) { return; }\n    window.wpeData.scripts[SCRIPT_NAME] = true;\n\n    const updateButtons = (buttons, newIndex) => {\n        buttons.forEach((btn, idx) => {\n            if (idx === newIndex) {\n                btn.setAttribute('aria-pressed', 'true');\n                btn.setAttribute('data-active', 'true');\n            } else {\n                btn.setAttribute('aria-pressed', 'false');\n                btn.setAttribute('data-active', 'false');\n            }\n        });\n    };\n\n    document.addEventListener('DOMContentLoaded', () => {\n\n        const controlWrappers = document.querySelectorAll(controlWrapperSelector);\n\n        const init = () => {\n            Array.from(controlWrappers).forEach(el => {\n                let sliderId = el.dataset.wpeSplideId;\n                sliderId = sliderId.replace('brxe-', ''); /* Remove 'brxe-' prefix */\n                const sliderInstance = bricksData.splideInstances[sliderId];\n                window.wpeData.splideControls[el.id] = sliderInstance;\n\n                /* Dispatch custom event so other JS can interact */\n                const event = new CustomEvent(`${SCRIPT_NAME}:init`, {\n                    detail: {\n                        controlId: el.id,\n                        sliderId: sliderId,\n                        splideInstance: sliderInstance\n                    }\n                });\n                window.dispatchEvent(event);\n\n                const slides = sliderInstance.Components.Elements.slides;\n                const buttons = el.querySelectorAll('button');\n                buttons.forEach((btn, idx) => {\n                    btn.setAttribute('data-index', idx);\n                    btn.setAttribute('aria-controls', slides[idx].id);\n                    btn.addEventListener('click', event => {\n                        const { currentTarget } = event;\n                        const slideIndex = parseInt(currentTarget.dataset.index, 10);\n                        sliderInstance.go(slideIndex);\n                    });\n                });\n\n                /* Set the first button to active on initialization */\n                updateButtons(buttons, 0);\n\n                /* Listen to the moved event to update buttons */\n                sliderInstance.on('moved', (newIndex) => {\n                    updateButtons(buttons, newIndex);\n                });\n            });\n\n            /* Dispatch the 'initComplete' event after initialization */\n            const initCompleteEvent = new CustomEvent(`${SCRIPT_NAME}:initComplete`);\n            window.dispatchEvent(initCompleteEvent);\n        };\n\n        /* allow time for Bricks to init slider, hopefully in future there will be an event */\n        setTimeout(() => {\n            init();\n        }, 250);\n\n    });\n})();\n\n</script>\n","executeCode":true,"noRoot":true,"signature":"545ccbfe327861c046e4c4b2c234ed32","user_id":1,"time":1717368493,"_display":"none"},"label":"Controller Init"},{"id":"oennwd","name":"slider-nested","parent":"ipncxv","children":["vsdkmb","tdtuml","qyfozp","xzpste"],"settings":{"_background":{"color":{"hex":"#e6e7e8"}},"pagination":true,"arrows":true}},{"id":"vsdkmb","name":"block","parent":"oennwd","children":["vmbjpj","zdnabz"],"settings":[],"label":"Slide 1"},{"id":"vmbjpj","name":"heading","parent":"vsdkmb","children":[],"settings":{"text":"Slide 1","_interactions":[{"id":"hlgozh","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp"}],"_cssGlobalClasses":["aeansz"]}},{"id":"zdnabz","name":"button","parent":"vsdkmb","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary","_interactions":[{"id":"iqgncj","trigger":"enterView","action":"startAnimation","animationDelay":"0.3","animationType":"fadeInRight"}],"_cssGlobalClasses":["aeansz"]}},{"id":"tdtuml","name":"block","parent":"oennwd","children":["seumku","dqlamc"],"settings":[],"label":"Slide 2"},{"id":"seumku","name":"heading","parent":"tdtuml","children":[],"settings":{"text":"Slide 2","_cssGlobalClasses":["aeansz"]}},{"id":"dqlamc","name":"button","parent":"tdtuml","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary","_interactions":[{"id":"thmxjs","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp","animationDelay":"0.2s"}],"_cssGlobalClasses":["aeansz"]}},{"id":"qyfozp","name":"block","parent":"oennwd","children":["ntcuny","eprflc"],"settings":[],"label":"Slide 3"},{"id":"ntcuny","name":"heading","parent":"qyfozp","children":[],"settings":{"text":"Slide 3"}},{"id":"eprflc","name":"button","parent":"qyfozp","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}},{"id":"xzpste","name":"block","parent":"oennwd","children":["fekuqu","kcmsru"],"settings":[],"label":"Slide 4"},{"id":"fekuqu","name":"heading","parent":"xzpste","children":[],"settings":{"text":"Slide 4"}},{"id":"kcmsru","name":"button","parent":"xzpste","children":[],"settings":{"text":"I am a button","size":"lg","style":"primary"}},{"id":"iwrkdr","name":"div","parent":"dbe55a","children":["ulsaju"],"settings":{"tag":"li","_cssGlobalClasses":["etqxgn"],"_attributes":[{"id":"mzcqgh","name":"role","value":"presentation"}]},"label":"LI"},{"id":"ulsaju","name":"button","parent":"iwrkdr","children":[],"settings":{"text":"Test","style":"primary","_cssGlobalClasses":["bggreh"],"tag":"button","_attributes":[{"id":"dwndbl","name":"role","value":"tab"}]}},{"id":"ipncxv","name":"block","parent":"dssnom","children":["dbe55a","oennwd"],"settings":{"_rowGap":"2rem"}}],"source":"bricksCopiedElements","sourceUrl":"https://dev.wpevolve.net","version":"1.9.8","globalClasses":[{"id":"mkgizl","name":"wpe-splide-buttons","settings":{"_margin":{"top":"0","right":"0","bottom":"0","left":"0"},"_padding":{"top":"0","right":"0","bottom":"0","left":"0"},"_cssCustom":".wpe-splide-buttons{\n  list-style-type: none;\n}\n\n:where(.wpe-splide-buttons){\n  --root-gap: 1rem;\n  \n  --button-background: var(--bricks-color-primary);\n  --button-color: black;\n  --button-border-radius: 30px;\n  \n  --button-background-active: var(--bricks-bg-dark);\n  --button-color-active: white;\n}\n\n:where(.wpe-splide-buttons){\n  gap: var(--root-gap);\n}\n\n\n/* buttons */\n.wpe-splide-buttons__button {\n\tbackground: var(--button-background); \n  color: var(--button-color);\n  border-radius: var(--button-border-radius);\n}\n.wpe-splide-buttons__button[data-active=\"true\"]{\n  background: var(--button-background-active); \n  color: var(--button-color-active);\n}"}},{"id":"etqxgn","name":"wpe-splide-buttons__li","settings":[]},{"id":"bggreh","name":"wpe-splide-buttons__button","settings":[]},{"id":"aeansz","name":"opacity--0","settings":{"_cssCustom":".bricks-is-frontend .opacity--0.brx-animated]{\n opacity: 0; \n}","_interactions":[{"id":"ltnkjh","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp"}]}}],"globalElements":[]}