mp-design-system 2.0.77 → 2.0.78

package/dist/assets/js/app.js

@@ -1120,6 +1120,10 @@
       const type = el.dataset.carouselType || "slide";
       const rewind = el.dataset.carouselRewind === "true";
       const perMove = parseInt(el.dataset.carouselPerMove) || 1;
+      const rootStyles = getComputedStyle(document.documentElement);
+      const wrapperRaw = rootStyles.getPropertyValue("--wrapper");
+      const rootFont = parseFloat(rootStyles.fontSize);
+      const wrapperWidth = parseFloat(wrapperRaw) * rootFont;
       const splide = new import_splide_min.default(el, {
         type,
         perMove,
@@ -1130,28 +1134,10 @@
         preventClick: true,
         rewind,
         clones: 0,
-        autoWidth: true
+        autoWidth: true,
+        gap: "var(--row-gap)"
       });
-      function setSlideWidths() {
-        const wrapperWidth = parseInt(
-          getComputedStyle(document.documentElement).getPropertyValue(
-            "--wrapper"
-          )
-        );
-        const gap = parseInt(getComputedStyle(el).getPropertyValue("--row-gap"));
-        let cardWidth;
-        if (window.innerWidth >= 1024) cardWidth = (wrapperWidth - 3 * gap) / 4;
-        else if (window.innerWidth >= 768)
-          cardWidth = (wrapperWidth - 2 * gap) / 3;
-        else if (window.innerWidth >= 680) cardWidth = (wrapperWidth - gap) / 2;
-        else cardWidth = wrapperWidth;
-        el.querySelectorAll(".splide__slide").forEach((slide) => {
-          slide.style.width = `${cardWidth}px`;
-        });
-        splide.refresh();
-      }
-      window.addEventListener("resize", setSlideWidths);
-      setSlideWidths();
+      splide.mount();
       el.querySelector(".c-carousel__arrow--prev")?.addEventListener(
         "click",
         () => splide.go("<")
@@ -1163,7 +1149,6 @@
       el.querySelectorAll("a").forEach((link) => {
         link.addEventListener("click", (e) => e.stopPropagation());
       });
-      splide.mount();
     });
     const galleryPairs = document.querySelectorAll(
       '[data-carousel="gallery-main"]'