hologram-web-library/src/scripts/hw_multicolumn.js

Hologram Web Library components

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

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

    const mainSwiperConfig = {
      slidesPerView: 1,
      breakpoints: {
        768: {
          slidesPerView: 3
        },
        1280: {
          slidesPerView: 6
        }
      },
      pagination: {
        el: ".hw_multicolumn-pagination",
        type: "bullets"
      }
    };

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

      const multicolumnElems = document.querySelectorAll(".multicolumn");

      multicolumnElems.forEach((multicolumnElem) => {
        const swiperConfig = multicolumnElem.dataset.swiperConfig;
        const swiperConfigObj = swiperConfig ? JSON.parse(swiperConfig) : null;
        Object.assign(multicolumnElem, mainSwiperConfig, swiperConfigObj);
        multicolumnElem.initialize();
      });
    };

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