ICOM/assets/js/poster-slider.js

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();
});