<!-- 05.26c06v4 Slideshow Two Photos -->
<script>
var SlideshowTwoPhotosConfig = {
autoplay: false,
autoplayDelay: 5000,
slideSpeed: 500,
textTopOffset: '50px',
titleFontSize: '20px',
descriptionFontSize: '16px',
buttonFontSize: '16px',
smallImageSize: '11%',
largeImageSizeMobile: '75%',
smallImageSizeMobile: '42%'
};
</script>
<style>
@media(max-width:767px){
.stp-small-wrap{
align-self:flex-end!important;
margin-right:-6px!important;
}
.stp-row-large{
width:calc(100% + 16px)!important;
margin-left:-16px!important;
}
}
</style>
<script>
(function () {
var SECTION_SELECTOR = 'section[id*="slideshow-two-photos"]';
var SWIPER_CSS_URL = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';
var SWIPER_JS_URL = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
(function hideNative() {
if (document.getElementById('stp-hide-native')) return;
var style = document.createElement('style');
style.id = 'stp-hide-native';
style.textContent = 'section[id*="slideshow-two-photos"] .user-items-list-item-container{display:none!important;}';
document.head.appendChild(style);
})();
function injectCss(cfg) {
if (document.getElementById('stp-style')) return;
var smallSize = cfg.smallImageSize || '22%';
var largeMobile = cfg.largeImageSizeMobile || '75%';
var smallMobile = cfg.smallImageSizeMobile || '42%';
var s = document.createElement('style');
s.id = 'stp-style';
s.textContent = [
'.stp-wrap{position:relative;display:flex;gap:48px;align-items:flex-start;padding:6.6vmax;overflow:hidden;}',
'.stp-row-large{display:contents;}',
'.stp-swiper-large{width:52%;flex-shrink:0;}',
'.stp-swiper-large .swiper-slide img{width:100%;object-fit:cover;display:block;}',
'.stp-right-col{flex:1;}',
'.stp-text-area{position:relative;}',
'.stp-text-panel{position:absolute;top:0;left:0;right:0;opacity:0;transition:opacity .5s ease;pointer-events:none;}',
'.stp-text-panel.stp-active{opacity:1;pointer-events:auto;}',
'.stp-title{font-family:var(--heading-font-font-family);font-style:var(--heading-font-font-style);font-weight:var(--heading-font-font-weight);line-height:var(--heading-font-line-height);letter-spacing:var(--heading-font-letter-spacing);text-transform:var(--heading-font-text-transform);color:var(--list-section-carousel-card-title-color);margin-bottom:16px;}',
'.stp-description{color:var(--list-section-carousel-card-description-color);margin-bottom:28px;}',
'.stp-description p{margin:0;line-height:1.6;}',
'.stp-btn{display:inline-block;padding:10px 24px;background-color:transparent;border:1px solid var(--list-section-carousel-card-button-background-color);color:var(--list-section-carousel-card-button-background-color);font-family:var(--primary-button-font-font-family);font-style:var(--primary-button-font-font-style);font-weight:var(--primary-button-font-font-weight);line-height:var(--primary-button-font-line-height);letter-spacing:var(--primary-button-font-letter-spacing);text-transform:var(--primary-button-font-text-transform);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s;}',
'.stp-btn:hover{background-color:var(--list-section-carousel-card-button-background-color);color:var(--list-section-carousel-card-button-text-color);}',
'.stp-arrows{position:absolute;bottom:6.6vmax;left:calc(52% + 48px);display:flex;flex-direction:column;gap:8px;}',
'.stp-arrow-btn{background:transparent;border:none;cursor:pointer;padding:4px 0;display:flex;align-items:center;opacity:1;transition:opacity .2s;}',
'.stp-arrow-btn:hover{opacity:0.6;}',
'.stp-arrow-line{display:block;width:52px;height:1px;background:var(--list-section-carousel-card-title-color,#333);position:relative;}',
'.stp-arrow-next .stp-arrow-line::after{content:"";position:absolute;right:-1px;top:-4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--list-section-carousel-card-title-color,#333);}',
'.stp-arrow-prev .stp-arrow-line::before{content:"";position:absolute;left:-1px;top:-4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid var(--list-section-carousel-card-title-color,#333);}',
'.stp-small-wrap{position:absolute;bottom:6.6vmax;right:6.6vmax;width:' + smallSize + ';overflow:hidden;}',
'.stp-small-wrap .swiper-slide img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}',
'@media(max-width:767px){',
'.stp-wrap{flex-direction:column;gap:16px;padding:16px;align-items:stretch;}',
'.stp-small-wrap{position:static;width:' + smallMobile + ';order:1;align-self:flex-start;}',
'.stp-row-large{display:flex;align-items:center;gap:16px;order:2;width:100%;}',
'.stp-swiper-large{width:' + largeMobile + ';flex-shrink:1;min-width:0;}',
'.stp-arrows{position:static;flex-shrink:0;left:auto;bottom:auto;}',
'.stp-right-col{width:100%;order:3;}',
'.stp-text-area{margin-top:0!important;}',
'.stp-text-panel{position:static;display:none;}',
'.stp-text-panel.stp-active{display:block;opacity:1;pointer-events:auto;}',
'}'
].join('');
document.head.appendChild(s);
}
function loadSwiper(cb) {
if (window.Swiper) { cb(); return; }
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = SWIPER_CSS_URL;
document.head.appendChild(link);
var script = document.createElement('script');
script.src = SWIPER_JS_URL;
script.onload = function () { cb(); };
document.head.appendChild(script);
}
function parseContext(container) {
try {
return JSON.parse(container.getAttribute('data-current-context'));
} catch (e) {
return null;
}
}
function getAspectRatioPadding(ratio) {
var parts = (ratio || '4:3').split(':');
var w = parseFloat(parts[0]) || 4;
var h = parseFloat(parts[1]) || 3;
return (h / w * 100).toFixed(4) + '%';
}
function getAlignStyle(alignment) {
var map = { left: 'flex-start', center: 'center', right: 'flex-end' };
return map[alignment] || 'flex-start';
}
function buildSlide(item, paddingBottom) {
var slide = document.createElement('div');
slide.className = 'swiper-slide';
var ratio = document.createElement('div');
ratio.style.cssText = 'position:relative;width:100%;padding-bottom:' + paddingBottom + ';overflow:hidden;';
var img = document.createElement('img');
img.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;';
var assetUrl = item.image && item.image.assetUrl ? item.image.assetUrl : '';
img.src = assetUrl + '?format=1500w';
img.alt = item.title || '';
ratio.appendChild(img);
slide.appendChild(ratio);
return slide;
}
function buildSmallSlide(item) {
var slide = document.createElement('div');
slide.className = 'swiper-slide';
var img = document.createElement('img');
var thumbUrl = item.imageAltText || '';
img.src = thumbUrl.indexOf('?') !== -1 ? thumbUrl : thumbUrl + '?format=1000w';
img.alt = '';
slide.appendChild(img);
return slide;
}
function buildTextPanel(item, opts, cfg, index) {
var panel = document.createElement('div');
panel.className = 'stp-text-panel' + (index === 0 ? ' stp-active' : '');
if (opts.isTitleEnabled !== false) {
var title = document.createElement('div');
title.className = 'stp-title';
title.textContent = item.title || '';
if (cfg.titleFontSize) title.style.fontSize = cfg.titleFontSize;
panel.appendChild(title);
}
if (opts.isBodyEnabled !== false && item.description) {
var desc = document.createElement('div');
desc.className = 'stp-description';
desc.innerHTML = item.description;
if (cfg.descriptionFontSize) desc.style.fontSize = cfg.descriptionFontSize;
panel.appendChild(desc);
}
if (opts.isButtonEnabled !== false && item.button && item.button.buttonText) {
var btnWrap = document.createElement('div');
btnWrap.style.cssText = 'display:flex;justify-content:' + getAlignStyle(opts.buttonAlignment || 'left') + ';';
var btn = document.createElement('a');
btn.className = 'stp-btn';
btn.textContent = item.button.buttonText;
btn.href = item.button.buttonLink || '#';
if (item.button.buttonNewWindow) btn.target = '_blank';
if (cfg.buttonFontSize) btn.style.fontSize = cfg.buttonFontSize;
btnWrap.appendChild(btn);
panel.appendChild(btnWrap);
}
return panel;
}
function init() {
var sections = document.querySelectorAll(SECTION_SELECTOR);
if (!sections.length) return;
var cfg = window.SlideshowTwoPhotosConfig || {};
sections.forEach(function (section) {
if (section.querySelector('.stp-wrap')) return;
var container = section.querySelector('.user-items-list-item-container');
if (!container) return;
var ctx = parseContext(container);
if (!ctx || !ctx.userItems || !ctx.userItems.length) return;
var items = ctx.userItems;
var opts = ctx.options || {};
var paddingBottom = getAspectRatioPadding(opts.mediaAspectRatio);
var speed = cfg.slideSpeed || 700;
var textOffset = cfg.textTopOffset || '0px';
injectCss(cfg);
var wrap = document.createElement('div');
wrap.className = 'stp-wrap';
var rowLarge = document.createElement('div');
rowLarge.className = 'stp-row-large';
var swiperLargeEl = document.createElement('div');
swiperLargeEl.className = 'stp-swiper-large swiper';
var swiperLargeWrapper = document.createElement('div');
swiperLargeWrapper.className = 'swiper-wrapper';
items.forEach(function (item) {
swiperLargeWrapper.appendChild(buildSlide(item, paddingBottom));
});
swiperLargeEl.appendChild(swiperLargeWrapper);
rowLarge.appendChild(swiperLargeEl);
var arrows = document.createElement('div');
arrows.className = 'stp-arrows';
var btnNext = document.createElement('button');
btnNext.className = 'stp-arrow-btn stp-arrow-next';
btnNext.setAttribute('aria-label', 'Next');
btnNext.innerHTML = '<span class="stp-arrow-line"></span>';
var btnPrev = document.createElement('button');
btnPrev.className = 'stp-arrow-btn stp-arrow-prev';
btnPrev.setAttribute('aria-label', 'Previous');
btnPrev.innerHTML = '<span class="stp-arrow-line"></span>';
arrows.appendChild(btnNext);
arrows.appendChild(btnPrev);
rowLarge.appendChild(arrows);
wrap.appendChild(rowLarge);
var rightCol = document.createElement('div');
rightCol.className = 'stp-right-col';
var textArea = document.createElement('div');
textArea.className = 'stp-text-area';
textArea.style.marginTop = textOffset;
var panels = [];
items.forEach(function (item, i) {
var panel = buildTextPanel(item, opts, cfg, i);
panels.push(panel);
textArea.appendChild(panel);
});
rightCol.appendChild(textArea);
wrap.appendChild(rightCol);
var smallWrap = document.createElement('div');
smallWrap.className = 'stp-small-wrap';
var swiperSmallEl = document.createElement('div');
swiperSmallEl.className = 'swiper';
var swiperSmallWrapper = document.createElement('div');
swiperSmallWrapper.className = 'swiper-wrapper';
items.forEach(function (item) {
swiperSmallWrapper.appendChild(buildSmallSlide(item));
});
swiperSmallEl.appendChild(swiperSmallWrapper);
smallWrap.appendChild(swiperSmallEl);
wrap.appendChild(smallWrap);
container.parentNode.insertBefore(wrap, container);
loadSwiper(function () {
function switchText(realIdx) {
panels.forEach(function (p, i) {
if (i === realIdx) p.classList.add('stp-active');
else p.classList.remove('stp-active');
});
}
var small = new Swiper(swiperSmallEl, {
allowTouchMove: false,
speed: speed,
loop: true
});
var autoplayOpts = false;
if (cfg.autoplay !== false) {
autoplayOpts = {
delay: cfg.autoplayDelay || 5000,
disableOnInteraction: false,
pauseOnMouseEnter: true
};
}
var main = new Swiper(swiperLargeEl, {
speed: speed,
loop: true,
autoplay: autoplayOpts,
keyboard: { enabled: true, onlyInViewport: true },
grabCursor: true,
touchEventsTarget: 'container',
on: {
slideNextTransitionStart: function () {
small.slideNext();
},
slidePrevTransitionStart: function () {
small.slidePrev();
},
slideChange: function () {
switchText(this.realIndex);
}
}
});
btnNext.addEventListener('click', function () { main.slideNext(); });
btnPrev.addEventListener('click', function () { main.slidePrev(); });
});
});
}
function run() {
init();
document.addEventListener('mercury:load', init);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run);
} else {
run();
}
})();
</script>