Opens in a new tab

ProGear360

test

Written by
Jay Pagano
Contents
/**

** One-time Setup (Required) **

This enables the custom Splide slider arrows and progress bars across all supported layouts on your site.

This snippet will be included in all slider layouts that use custom arrows and/or progress bars in our libraries, but you only need to install this snippet once per site.

How to install

1. Copy the Splide global controls JS script from the “See instructions inside” code block from your layout.

2. Paste it into your site-wide FOOTER (before the closing </body> tag). See instructions here if you’re unsure how to do this. https://pixflow.dev/doc/getting-started/splide-code-integration

3. Save, then clear any site/caching plugin/CDN cache.

That’s it—no further setup is needed. All compatible layouts will work automatically.

 ** You can delete this code element once you’ve added the script to your site **

*/

document.addEventListener("DOMContentLoaded",(()=>{setTimeout((()=>{const e=".brxe-section",t=(t,n,i)=>{const r=document.querySelectorAll(t);if(!r.length)return;r.forEach((t=>{const r=t.getAttribute("data-script-id");if(!r)return;const s=window.bricksData?.splideInstances?.[r];if(!s)return;const o=t.closest(e)||document;o.addEventListener("click",(t=>{const r=t.target.closest(n),a=t.target.closest(i),l=r||a;l&&l.closest(e)===o&&s.go(r?"<":">")}))}))},n=(()=>{const e=window.__splideTargets;if(!e)return[];if(Array.isArray(e))return e;if("string"==typeof e)return[e];if(e&&"noDelay"in e){const t=e.noDelay;return Array.isArray(t)?t:"string"==typeof t?[t]:[]}return[]})();var i;(i=n,[...new Set((Array.isArray(i)?i:[i]).flat().filter(Boolean))]).forEach((e=>{t(e,e.replace("__slider","__slider-btn--left"),e.replace("__slider","__slider-btn--right"))}))}),250),function(){const e=[],t=new Map;function n(e,t){t&&t.el&&("segment"===t.type?function(e,t){try{const n=e.Components;if(!n||!n.Slides)return;const i=n.Slides,r=i.get(!0),s=r.length;if(s<=0)return t.style.width="0%",t.style.transform="translateX(0%)",void t.setAttribute("aria-valuenow","0");const o=e.options||{},a=o.type||"slide",l=Math.max(1,Number(o.perPage)||1),d=Math.min(100,Math.max(0,l/s*100)),c=Math.max(0,100-d),u=i.getAt(e.index);let m=0;if(u)if(u.isClone&&u.slideIndex>=0)m=u.slideIndex;else{const e=r.findIndex((e=>e.slide===u.slide));m=e>=0?e:Math.max(0,Math.min(s-1,u.index))}let h=0;if("loop"===a)h=s>1?m/(s-1)*c:0;else{let e=Number(o.perMove);(!Number.isFinite(e)||e<1)&&(e=1);let t=Math.ceil((s-l)/e)+1;(!Number.isFinite(t)||t<1)&&(t=1),h=t<=1?0:Math.min(t-1,Math.max(0,Math.floor(m/e)))/(t-1)*c}const f=Math.min(100,Math.max(0,d)),p=Math.min(c,Math.max(0,h)),g=f>0?p/f*100:0;t.style.width=f.toFixed(2)+"%",t.style.transform="translateX("+g.toFixed(2)+"%)",t.setAttribute("aria-valuenow",p.toFixed(2))}catch(e){}}(e,t.el):function(e,t){try{const n=e.Components;if(!n||!n.Slides)return;const i=n.Slides,r=i.get(!0),s=r.length;if(s<=0)return t.style.width="0%",void t.setAttribute("aria-valuenow","0");const o=e.options||{},a=o.type||"slide",l=i.getAt(e.index);let d=0;if(l)if(l.isClone&&l.slideIndex>=0)d=l.slideIndex;else{const e=r.findIndex((e=>e.slide===l.slide));d=e>=0?e:Math.max(0,Math.min(s-1,l.index))}let c=0;if("loop"===a)c=(d+1)/s*100;else{const e=Math.max(1,Number(o.perPage)||1);let t=Number(o.perMove);(!Number.isFinite(t)||t<1)&&(t=1);let n=Math.ceil((s-e)/t)+1;(!Number.isFinite(n)||n<1)&&(n=1),c=(Math.min(n-1,Math.max(0,Math.floor(d/t)))+1)/n*100}const u=Math.min(100,Math.max(0,c)).toFixed(2);t.style.width=u+"%",t.setAttribute("aria-valuenow",u)}catch(e){}}(e,t.el))}setTimeout((()=>{let i;const r=document.querySelectorAll(".has-progress-bar");r.length&&(r.forEach((i=>{const r=i.querySelector(".splide");if(!r)return;const s=i.querySelector(".slider-progress > .slider-progress__segment"),o=i.querySelector(".slider-progress__bar"),a=s?{type:"segment",el:s}:o?{type:"bar",el:o}:null;if(!a)return;let l;const d=r.getAttribute("data-script-id");d&&window.bricksData?.splideInstances?.[d]?l=window.bricksData.splideInstances[d]:(l=new Splide(r,{perPage:1,perMove:1}),l.mount()),n(l,a),l.on("mounted",(()=>n(l,a))),l.on("move",(()=>n(l,a))),l.on("refresh",(()=>n(l,a))),e.push(l),t.set(l,a)})),window.addEventListener("resize",(()=>{clearTimeout(i),i=setTimeout((()=>{e.forEach((e=>{e.refresh(),n(e,t.get(e))}))}),120)})))}),500)}()}));