hologram-web-library/src/scripts/hw_styled-card-with-slider.js

Hologram Web Library components

import { register } from "swiper/element/bundle";

export default () => {
  (function (styledCardWithSlider) {
    "use strict";

    const nextEl = ".hw_styled-card-with-slider-control-buttons .slide-next";
    const prevEl = ".hw_styled-card-with-slider-control-buttons .slide-prev";

    const mainSwiperConfig = {
      slidesPerView: 1,
      pagination: {
        el: ".hw_styled-card-with-slider-pagination",
        type: "bullets"
      },
      navigation: {
        nextEl,
        prevEl,
        disabledClass: "opacity-50"
      },
    };

    const init = () => {
      register();

      const sliderElements = document.querySelectorAll(".styled-card-with-slider");

      sliderElements.forEach((sliderElement) => {
        Object.assign(sliderElement, mainSwiperConfig, null);
        sliderElement.initialize();
      });
    };

    styledCardWithSlider.init = init;
  })((window.styledCardWithSlider = window.styledCardWithSlider || {}));
};