540740cb25
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
- featured-text: add .with-image variant (20rem image + peach gradient via inline CSS vars) - poster-slider: add .colored variant (blue bg + pink color via inline CSS vars), center titles always, switch buttons to mask-image for CSS color theming, refactor JS to support multiple independent sliders with initialSlide derived from actual slide count Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
46 lines
1.8 KiB
JavaScript
46 lines
1.8 KiB
JavaScript
const slidersData = [
|
|
[
|
|
{ title: '1980 - Mexico', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
{ title: '1980 - Mexico', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
{ title: '1986 - Buenos Aires', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
],
|
|
[
|
|
{ title: '2000 - Barcelona', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
{ title: '2004 - Seoul', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
{ title: '2007 - Vienna', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
{ title: '2010 - Shanghai', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
{ title: '2013 - Rio', caption: 'Occasion', photographer: 'Name of photographer' },
|
|
],
|
|
];
|
|
|
|
document.querySelectorAll('.poster-slider').forEach((section, i) => {
|
|
const swiperEl = section.querySelector('.poster-swiper');
|
|
const titleEl = section.querySelector('.slide-info .title');
|
|
const captionEl = section.querySelector('.slide-info .caption');
|
|
const data = slidersData[i] ?? [];
|
|
const slideCount = swiperEl.querySelectorAll('.swiper-slide').length;
|
|
const initialSlide = Math.floor(slideCount / 2);
|
|
|
|
const swiper = new Swiper(swiperEl, {
|
|
slidesPerView: 3,
|
|
centeredSlides: true,
|
|
spaceBetween: 16,
|
|
loop: false,
|
|
initialSlide,
|
|
keyboard: { enabled: true },
|
|
navigation: {
|
|
nextEl: section.querySelector('.poster-next'),
|
|
prevEl: section.querySelector('.poster-prev'),
|
|
},
|
|
});
|
|
|
|
function updateInfo() {
|
|
const entry = data[swiper.realIndex];
|
|
if (!entry || !titleEl || !captionEl) return;
|
|
titleEl.textContent = entry.title;
|
|
captionEl.innerHTML = `${entry.caption}<br>${entry.photographer}`;
|
|
}
|
|
|
|
swiper.on('slideChange', updateInfo);
|
|
updateInfo();
|
|
});
|