hologram-web-library/src/scripts/hw_slideshow-image-and-text-v1.js

Hologram Web Library components

import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css"; 

export const initImageTextSlideshowSwiper = () => {
  const swiperSelector = ".slideshow-image-and-text-v1__carousel";
  const paginationSelector = "#slideshow-image-and-text-v1-pagination";
  const nextEl = ".slideshow-image-and-text-v1__carousel-control-buttons .slide-next";
  const prevEl = ".slideshow-image-and-text-v1__carousel-control-buttons .slide-prev";

  const swiperContainer = document.querySelectorAll(swiperSelector);
  const swiperContainerDS = swiperContainer[0].dataset;
  const widthPercentage = swiperContainerDS.slideWidthPercentage;
  const windowWidth = window.innerWidth;

  const breakpoints = {
    768: {
      width: Math.max(windowWidth, 768) * (widthPercentage / 100)
    },
    1024: {
      width: Math.max(windowWidth, 1024) * (widthPercentage / 100)
    },
    1280: {
      width: Math.max(windowWidth, 1280) * (widthPercentage / 100)
    },
    1536: {
      width: Math.max(windowWidth, 1536) * (widthPercentage / 100)
    },
    1920: {
      width: Math.max(windowWidth, 1920) * (widthPercentage / 100)
    }
  };

  new Swiper(swiperSelector, {
    freeMode: false,
    mousewheel: {
      eventsTarget: ".swiper-wrapper ", // Make sure the container listens to the event
      preventDefault: true // Prevent the default behavior (page reload on macOS)
    },
    spaceBetween: 24,
    direction: "horizontal",
    pagination: {
      el: paginationSelector,
      clickable: true
    },
    navigation: {
      nextEl,
      prevEl,
      disabledClass: "opacity-50"
    },
    slidesPerView: 1,
    breakpoints
  });
};