SwiperJS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
  .custom-slideshow-wrapper-reel {
    --slideshow-height: 200px;
    --slideshow-mobile-height: 120px;
    position: relative;
    height: var(--slideshow-height);
    margin-bottom: 20px;
    margin-top: 20px;
  }
  /* desktop */
  @media screen and (min-width:768px) {
      section[id*="slideshow2reel"] .gallery-slideshow {
  display: none;
    }
  }
  /* mobile */
  @media screen and (max-width:767px) {
    .custom-slideshow-wrapper-reel {
  	display: none;
    }}
  .custom-horizontal-slideshow-reel {
    width: 100%;
    height: 100%;
  }
  .custom-horizontal-slideshow-reel .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
  }
  .custom-horizontal-slideshow-reel .gallery-reel-control-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
  }
  .custom-horizontal-slideshow-reel .gallery-reel-control-btn[data-previous] {
    left: 10px;
  }
  .custom-horizontal-slideshow-reel .gallery-reel-control-btn[data-next] {
    right: 10px;
  }
  .custom-horizontal-slideshow-reel .gallery-reel-control-btn-icon {
    width: 28;
    height: 28px;
  }
  .custom-horizontal-slideshow-reel .gallery-reel-control-btn-icon svg {
    width: 100%;
    height: 100%;
    stroke: #fff;
    stroke-width: 2;
  }
  .custom-horizontal-slideshow-reel .swiper-button-prev,
  .custom-horizontal-slideshow-reel .swiper-button-next {
    display: none;
  }
  @media screen and (max-width:767px) {
  .custom-slideshow-wrapper-reel {
    height: var(--slideshow-mobile-height);
  }
  }
  
</style>

<script>
const reelSlideshowConfig = {
  effect: 'slide',
  direction: 'horizontal',
  speed: 600,
  loop: true,
  navigation: {
    arrows: true,
  },
  slidesPerView: 4,
  spaceBetween: 10,
  centeredSlides: false,
  keyboard: true,
  breakpoints: {
    768: {
      slidesPerView: 10,
      spaceBetween: 10
    }
  }
};
</script>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function() {
    const section = document.querySelector('section[id*="slideshow2reel"]');
    if (!section) return;

    const images = [];
    section.querySelectorAll('.gallery-slideshow-item img').forEach(img => {
      images.push({
        src: img.getAttribute('data-image') || img.getAttribute('src'),
        alt: img.getAttribute('alt') || ''
      });
    });

    if (images.length === 0) return;

    const swiperHTML = `
      <div class="custom-slideshow-wrapper-reel">
        <div class="swiper custom-horizontal-slideshow-reel">
          <div class="swiper-wrapper">
            ${images.map(img => `
              <div class="swiper-slide">
                <img src="${img.src}" alt="${img.alt}" />
              </div>
            `).join('')}
          </div>
          ${reelSlideshowConfig.navigation.arrows ? `
          <button class="gallery-reel-control-btn" data-test="gallery-reel-control-btn-previous" data-previous="" aria-label="Previous Slide">
            <div class="gallery-reel-control-btn-icon">
              <svg viewBox="0 0 60 30">
                <path class="st0" d="M15.9,23.7L7.1,15l8.7-8.7" fill="none"></path>
                <path class="st1" d="M52.9,15H8.5" fill="none"></path>
              </svg>
            </div>
          </button>
          <button class="gallery-reel-control-btn" data-test="gallery-reel-control-btn-next" data-next="" aria-label="Next Slide">
            <div class="gallery-reel-control-btn-icon">
              <svg viewBox="0 0 60 30">
                <path d="M44.1,6.3l8.7,8.7l-8.7,8.7" fill="none"></path>
                <path d="M7.1,15h44.4" fill="none"></path>
              </svg>
            </div>
          </button>
          ` : ''}
        </div>
      </div>
    `;

    const gallerySlideshow = section.querySelector('.gallery-slideshow');
    if (gallerySlideshow) {
      gallerySlideshow.insertAdjacentHTML('beforebegin', swiperHTML);

      const swiperOptions = {
        effect: reelSlideshowConfig.effect,
        direction: reelSlideshowConfig.direction,
        speed: reelSlideshowConfig.speed,
        loop: reelSlideshowConfig.loop,
        slidesPerView: reelSlideshowConfig.slidesPerView,
        spaceBetween: reelSlideshowConfig.spaceBetween,
        centeredSlides: reelSlideshowConfig.centeredSlides,
        breakpoints: reelSlideshowConfig.breakpoints
      };

      if (reelSlideshowConfig.navigation.arrows) {
        swiperOptions.navigation = {
          nextEl: '[data-next]',
          prevEl: '[data-previous]'
        };
      }

      if (reelSlideshowConfig.keyboard) {
        swiperOptions.keyboard = {
          enabled: true
        };
      }

      new Swiper('.custom-horizontal-slideshow-reel', swiperOptions);
    }
  }, 500);
});
</script>