<!-- 05.26c27v1 Light to Dark Carousel -->
<script>
window.STEP_CAROUSEL_CONFIG = {
sectionSelector: 'section[id*="light-dark-carousel"]',
stepPrefix: 'Step',
stepFontSize: '0.85rem',
titleFontSize: '1.2rem',
descriptionFontSize: '0.9rem',
arrowSize: 60,
arrowSizeMobile: 48,
arrowColor: '',
autoplay: false,
autoplayDelay: 4000,
titleLink: false,
imageLink: false,
wholeLink: false,
hideOriginalButton: false,
};
</script>
<style>
@media screen and (max-width:767px) {
section[id="light-dark-carousel"] .swiper .sc-text {
padding-left: 2em;
padding-right: 2em;
}
section[id="light-dark-carousel"] .desktop-arrows, section[id="light-dark-carousel"] .mobile-arrows {
display: none !important;
}
}
</style>
<script>
(function () {
var CFG = window.STEP_CAROUSEL_CONFIG || {};
var sectionSelector = CFG.sectionSelector || 'section[id*="light-dark-carousel"]';
var stepPrefix = CFG.stepPrefix || 'Step';
var stepFontSize = CFG.stepFontSize || '0.85rem';
var titleFontSize = CFG.titleFontSize || '1.2rem';
var descFontSize = CFG.descriptionFontSize || '0.9rem';
var autoplay = CFG.autoplay || false;
var autoplayDelay = CFG.autoplayDelay || 4000;
var titleLink = CFG.titleLink || false;
var imageLink = CFG.imageLink || false;
var wholeLink = CFG.wholeLink || false;
var hideOriginalButton = CFG.hideOriginalButton || false;
var arrowSize = CFG.arrowSize || 60;
var arrowSizeMobile = CFG.arrowSizeMobile || arrowSize;
var arrowColor = CFG.arrowColor || '';
var INJECTED = '__scSwiperDone';
var arrowColorVal = arrowColor || 'currentColor';
var arrowSvgW = Math.round(arrowSize * 0.37);
var arrowSvgH = Math.round(arrowSize * 0.27);
var arrowSvgWM = Math.round(arrowSizeMobile * 0.37);
var arrowSvgHM = Math.round(arrowSizeMobile * 0.27);
var ratioMap = {
'1:1': '100%', '4:3': '75%', '3:2': '66.67%',
'16:9': '56.25%', '3:4': '133.33%', '2:3': '150%',
};
function loadSwiper(cb) {
if (window.Swiper) { cb(); return; }
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';
document.head.appendChild(link);
var s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
s.onload = cb;
document.head.appendChild(s);
}
function getItemText(item) {
if (!item || !item.description) return '';
var tmp = document.createElement('div');
tmp.innerHTML = item.description;
return (tmp.textContent || tmp.innerText || '').trim();
}
function getItemLink(item) {
if (!item) return null;
var btn = item.button || item.buttonLink || null;
if (!btn) return null;
var url = btn.buttonLink || btn.url || btn.href || (typeof btn === 'string' ? btn : null);
if (!url) return null;
var newWindow = btn.newWindow === true || btn.openInNewWindow === true;
return { url: url, newWindow: newWindow };
}
function inject(section) {
if (section[INJECTED]) return;
var listEl = section.querySelector('.user-items-list-item-container');
if (!listEl) return;
var ctx = null;
try { ctx = JSON.parse(listEl.getAttribute('data-current-context')); } catch (e) { return; }
if (!ctx) return;
var items = ctx.userItems || [];
if (!items.length) return;
var opts = ctx.options || {};
var showMedia = opts.isMediaEnabled !== false;
var maxCols = opts.maxColumns || 3;
var ratioPct = ratioMap[opts.mediaAspectRatio || '4:3'] || '75%';
section[INJECTED] = true;
var sid = 'section[id="' + section.id + '"]';
var S = sid + ' ';
var styleId = 'sc-style-' + section.id;
var slidesPerViewDesktop = maxCols <= 3 ? 2.75 : 3.75;
if (!document.getElementById(styleId)) {
var css = [
S + '.sc-root { box-sizing:border-box; width:100%; position:relative; }',
S + '.swiper { width:100%; overflow:hidden; }',
S + '.swiper-slide { box-sizing:border-box; position:relative; }',
S + '.sc-img-wrap {' +
'position:relative; width:100%; overflow:hidden;' +
'}',
S + '.sc-img-wrap::before { content:""; display:block; padding-bottom:' + ratioPct + '; }',
S + '.sc-img-wrap img {' +
'position:absolute; top:0; left:0; width:100%; height:100%;' +
'object-fit:cover; display:block;' +
'transition:opacity .3s;' +
'}',
S + '.sc-text { padding:14px 0 0 0; }',
S + '.sc-step {' +
'font-size:' + stepFontSize + ';' +
'font-family:var(--body-font-font-family);' +
'font-style:var(--body-font-font-style);' +
'font-weight:var(--body-font-font-weight);' +
'letter-spacing:var(--body-font-letter-spacing);' +
'text-transform:var(--body-font-text-transform);' +
'margin-bottom:4px;' +
'transition:opacity .3s;' +
'}',
S + '.sc-title {' +
'font-size:' + titleFontSize + ';' +
'font-family:var(--heading-font-font-family);' +
'font-style:var(--heading-font-font-style);' +
'font-weight:var(--heading-font-font-weight);' +
'letter-spacing:var(--heading-font-letter-spacing);' +
'text-transform:var(--heading-font-text-transform);' +
'margin-bottom:6px;' +
'transition:opacity .3s;' +
'}',
S + '.sc-desc {' +
'font-size:' + descFontSize + ';' +
'font-family:var(--body-font-font-family);' +
'font-style:var(--body-font-font-style);' +
'font-weight:var(--body-font-font-weight);' +
'letter-spacing:var(--body-font-letter-spacing);' +
'text-transform:var(--body-font-text-transform);' +
'transition:opacity .3s;' +
'}',
S + '.swiper-slide .sc-img-wrap img { opacity:0.1; }',
S + '.swiper-slide .sc-step { opacity:0.35; }',
S + '.swiper-slide .sc-title { opacity:0.35; }',
S + '.swiper-slide .sc-desc { opacity:0; }',
S + '.swiper-slide.sc-active .sc-img-wrap img { opacity:1; }',
S + '.swiper-slide.sc-active .sc-step { opacity:1; }',
S + '.swiper-slide.sc-active .sc-title { opacity:1; }',
S + '.swiper-slide.sc-active .sc-desc { opacity:1; }',
S + '.sc-whole-link { color:inherit; text-decoration:none; display:block; cursor:pointer; }',
S + '.sc-whole-link:hover { color:inherit; text-decoration:none; }',
S + '.sc-title-link { color:inherit; text-decoration:none; cursor:pointer; }',
S + '.sc-title-link:hover { color:inherit; text-decoration:underline; }',
S + '.sc-img-link { display:block; cursor:pointer; }',
S + '.sc-arrow {' +
'position:absolute;' +
'width:' + arrowSize + 'px; height:' + arrowSize + 'px;' +
'border-radius:50%;' +
'border:1.5px solid ' + arrowColorVal + ';' +
'color:' + arrowColorVal + ';' +
'display:flex; align-items:center; justify-content:center;' +
'cursor:pointer; background:transparent;' +
'z-index:10;' +
'transition:opacity .2s;' +
'pointer-events:auto;' +
'}',
S + '.sc-arrow:hover { opacity:0.6; }',
S + '.sc-arrow svg {' +
'width:' + arrowSvgW + 'px; height:' + arrowSvgH + 'px;' +
'fill:none; stroke:' + arrowColorVal + '; stroke-width:1.5;' +
'}',
'@media (max-width:767px) {',
' ' + S + '.swiper { overflow:visible; }',
' ' + S + '.sc-arrow { width:' + arrowSizeMobile + 'px; height:' + arrowSizeMobile + 'px; }',
' ' + S + '.sc-arrow svg { width:' + arrowSvgWM + 'px; height:' + arrowSvgHM + 'px; }',
'}',
sid + ' .user-items-list-item-container { display:none !important; }',
sid + ' .user-items-list-carousel__arrow-wrapper { display:none !important; }',
sid + ' .mobile-arrows { display:none !important; }',
hideOriginalButton ? (S + '.sc-btn-wrap { display:none !important; }') : '',
].join('\n');
var styleEl = document.createElement('style');
styleEl.id = styleId;
styleEl.textContent = css;
document.head.appendChild(styleEl);
}
var root = document.createElement('div');
root.className = 'sc-root';
var swiperEl = document.createElement('div');
swiperEl.className = 'swiper';
var wrapper = document.createElement('div');
wrapper.className = 'swiper-wrapper';
function makeAnchor(url, newWindow, className) {
var a = document.createElement('a');
a.href = url;
a.className = className;
if (newWindow) {
a.target = '_blank';
a.rel = 'noopener noreferrer';
}
return a;
}
items.forEach(function (item, i) {
var slide = document.createElement('div');
slide.className = 'swiper-slide' + (i === 0 ? ' sc-active' : '');
var link = getItemLink(item);
var hasLink = !!link;
var container = slide;
if (hasLink && wholeLink) {
var whole = makeAnchor(link.url, link.newWindow, 'sc-whole-link');
slide.appendChild(whole);
container = whole;
}
if (showMedia && item.image && item.image.assetUrl) {
var imgWrap = document.createElement('div');
imgWrap.className = 'sc-img-wrap';
var img = document.createElement('img');
img.src = item.image.assetUrl + '?format=1000w';
img.alt = item.title || '';
img.loading = 'lazy';
imgWrap.appendChild(img);
if (hasLink && imageLink && !wholeLink) {
var imgA = makeAnchor(link.url, link.newWindow, 'sc-img-link');
imgA.appendChild(imgWrap);
container.appendChild(imgA);
} else {
container.appendChild(imgWrap);
}
}
var textEl = document.createElement('div');
textEl.className = 'sc-text';
var stepEl = document.createElement('div');
stepEl.className = 'sc-step';
stepEl.textContent = stepPrefix + ' ' + (i + 1) + ':';
textEl.appendChild(stepEl);
var titleEl = document.createElement('div');
titleEl.className = 'sc-title';
if (hasLink && titleLink && !wholeLink) {
var titleA = makeAnchor(link.url, link.newWindow, 'sc-title-link');
titleA.textContent = (item.title || '').trim();
titleEl.appendChild(titleA);
} else {
titleEl.textContent = (item.title || '').trim();
}
textEl.appendChild(titleEl);
var descEl = document.createElement('div');
descEl.className = 'sc-desc';
descEl.textContent = getItemText(item);
textEl.appendChild(descEl);
container.appendChild(textEl);
wrapper.appendChild(slide);
});
swiperEl.appendChild(wrapper);
root.appendChild(swiperEl);
var arrowEl = document.createElement('button');
arrowEl.className = 'sc-arrow';
arrowEl.setAttribute('aria-label', 'Next');
arrowEl.innerHTML = '<svg viewBox="0 0 44 18" xmlns="http://www.w3.org/2000/svg"><path d="M34.1477 1.39111L41.9321 9.17551L34.1477 16.9599"/><path d="M1.19088 9.16982H40.6755"/></svg>';
root.appendChild(arrowEl);
var inlineStyle = listEl.previousElementSibling;
if (inlineStyle && inlineStyle.tagName === 'STYLE') inlineStyle.remove();
listEl.parentNode.insertBefore(root, listEl);
listEl.remove();
function isMobileNow() {
return window.innerWidth < 768;
}
function positionArrow() {
var imgWrap = swiperEl.querySelector('.swiper-slide .sc-img-wrap');
if (!imgWrap) return;
var imgH = imgWrap.offsetHeight;
if (!imgH) return;
var arrowH = arrowEl.offsetHeight || (isMobileNow() ? arrowSizeMobile : arrowSize);
var inset = 24;
arrowEl.style.top = (imgH - arrowH - inset) + 'px';
if (isMobileNow()) {
arrowEl.style.right = '20px';
arrowEl.style.left = 'auto';
} else {
var slideEl = swiperEl.querySelector('.swiper-slide');
var slideW = slideEl ? slideEl.offsetWidth : 0;
var spaceBetween = 20;
var rootW = root.offsetWidth;
var activeSlide = swiperEl.querySelector('.swiper-slide.sc-active') || slideEl;
var activeRect = activeSlide.getBoundingClientRect();
var rootRect = root.getBoundingClientRect();
var activeRightInRoot = activeRect.right - rootRect.left;
var nextSlideRight = activeRightInRoot + spaceBetween + slideW;
var rightPos = rootW - nextSlideRight + inset;
if (rightPos < inset) rightPos = inset;
arrowEl.style.right = rightPos + 'px';
arrowEl.style.left = 'auto';
}
}
loadSwiper(function () {
var swiper = new Swiper(swiperEl, {
loop: items.length > 1,
speed: 500,
grabCursor: true,
centeredSlides: true,
slidesPerView: 1,
spaceBetween: 20,
mousewheel: { forceToAxis: true },
keyboard: { enabled: true, onlyInViewport: true },
autoplay: autoplay ? { delay: autoplayDelay, disableOnInteraction: false } : false,
breakpoints: {
768: {
slidesPerView: slidesPerViewDesktop,
spaceBetween: 20,
}
},
on: {
realIndexChange: function () {
var idx = this.realIndex;
swiperEl.querySelectorAll('.swiper-slide').forEach(function (sl) {
var orig = sl.getAttribute('data-swiper-slide-index');
var slideIdx = orig !== null ? parseInt(orig) : Array.from(wrapper.children).indexOf(sl);
sl.classList.toggle('sc-active', slideIdx === idx);
});
positionArrow();
},
slideChangeTransitionEnd: function () {
positionArrow();
},
afterInit: function () {
positionArrow();
},
imagesReady: function () {
positionArrow();
},
breakpoint: function () {
requestAnimationFrame(positionArrow);
setTimeout(positionArrow, 200);
},
resize: function () {
positionArrow();
},
},
});
arrowEl.addEventListener('click', function () {
swiper.slideNext();
});
positionArrow();
setTimeout(positionArrow, 100);
setTimeout(positionArrow, 500);
setTimeout(positionArrow, 1000);
});
}
function run() {
document.querySelectorAll(sectionSelector).forEach(function (section) {
if (!section[INJECTED]) inject(section);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run);
} else {
run();
}
document.addEventListener('mercury:load', run);
})();
</script>