wonder-image 1.2.0

package/src/build/lib/swiperjs/effect-carousel.css

@@ -0,0 +1,24 @@
+/**
+ * UI Initiative Carousel Slider
+ *
+ * Infinite 3D carousel slider
+ *
+ * https://uiinitiative.com
+ *
+ * Copyright 2023 UI Initiative
+ *
+ * Released under the UI Initiative Regular License
+ *
+ * December 27, 2023
+ */
+
+.swiper-carousel {
+  position: relative;
+  margin: 0 auto;
+  max-width: 100%;
+  overflow: hidden;
+}
+.swiper-carousel .swiper-slide,
+.swiper-carousel swiper-slide {
+  position: relative;
+}

package/src/build/lib/swiperjs/effect-carousel.esm.js

@@ -0,0 +1,102 @@
+/**
+ * UI Initiative Carousel Slider
+ *
+ * Infinite 3D carousel slider
+ *
+ * https://uiinitiative.com
+ *
+ * Copyright 2023 UI Initiative
+ *
+ * Released under the UI Initiative Regular License
+ *
+ * December 27, 2023
+ */
+
+export default function CarouselSlider({ swiper, on, extendParams }) {
+  extendParams({
+    carouselEffect: {
+      opacityStep: 0.33,
+      scaleStep: 0.2,
+      sideSlides: 2,
+    },
+  });
+  on('beforeInit', () => {
+    if (swiper.params.effect !== 'carousel') return;
+    swiper.classNames.push(`${swiper.params.containerModifierClass}carousel`);
+    const overwriteParams = {
+      watchSlidesProgress: true,
+      centeredSlides: true,
+    };
+
+    Object.assign(swiper.params, overwriteParams);
+    Object.assign(swiper.originalParams, overwriteParams);
+  });
+  on('progress', () => {
+    if (swiper.params.effect !== 'carousel') return;
+    const { scaleStep, opacityStep } = swiper.params.carouselEffect;
+    const sideSlides = Math.max(
+      Math.min(swiper.params.carouselEffect.sideSlides, 3),
+      1,
+    );
+    const modifyMultiplier = {
+      1: 2,
+      2: 1,
+      3: 0.2,
+    }[sideSlides];
+    const translateModifier = {
+      1: 50,
+      2: 50,
+      3: 67,
+    }[sideSlides];
+
+    const zIndexMax = swiper.slides.length;
+
+    for (let i = 0; i < swiper.slides.length; i += 1) {
+      const slideEl = swiper.slides[i];
+      const slideProgress = swiper.slides[i].progress;
+      const absProgress = Math.abs(slideProgress);
+      let modify = 1;
+
+      if (absProgress > 1) {
+        modify = (absProgress - 1) * 0.3 * modifyMultiplier + 1;
+      }
+      const opacityEls = slideEl.querySelectorAll(
+        '.swiper-carousel-animate-opacity',
+      );
+      const translate = `${
+        slideProgress *
+        modify *
+        translateModifier *
+        (swiper.rtlTranslate ? -1 : 1)
+      }%`;
+
+      const scale = 1 - absProgress * scaleStep;
+      const zIndex = zIndexMax - Math.abs(Math.round(slideProgress));
+      slideEl.style.transform = `translateX(${translate}) scale(${scale})`;
+      slideEl.style.zIndex = zIndex;
+      if (absProgress > sideSlides + 1) {
+        slideEl.style.opacity = 0;
+      } else {
+        slideEl.style.opacity = 1;
+      }
+
+      opacityEls.forEach((opacityEl) => {
+        opacityEl.style.opacity = 1 - absProgress * opacityStep;
+      });
+    }
+  });
+
+  on('setTransition', (s, duration) => {
+    if (swiper.params.effect !== 'carousel') return;
+    for (let i = 0; i < swiper.slides.length; i += 1) {
+      const slideEl = swiper.slides[i];
+      const opacityEls = slideEl.querySelectorAll(
+        '.swiper-carousel-animate-opacity',
+      );
+      slideEl.style.transitionDuration = `${duration}ms`;
+      opacityEls.forEach((opacityEl) => {
+        opacityEl.style.transitionDuration = `${duration}ms`;
+      });
+    }
+  });
+}

package/src/build/lib/swiperjs/effect-shutters.css

@@ -0,0 +1,33 @@
+/**
+ * UI Initiative Shutters Slider
+ *
+ * Infinite 3D carousel slider
+ *
+ * https://uiinitiative.com
+ *
+ * Copyright 2023 UI Initiative
+ *
+ * Released under the UI Initiative Regular License
+ *
+ * October 25, 2023
+ */
+
+.swiper-shutters .swiper-slide,
+.swiper-shutters swiper-slide {
+  overflow: hidden;
+}
+.swiper-shutters-image, .swiper-shutters-image-clones, .swiper-shutters-image-clone {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.swiper-shutters-image {
+  object-fit: cover;
+  object-position: center;
+}
+.swiper-shutters-image-clone {
+  overflow: hidden;
+}

package/src/build/lib/swiperjs/effect-shutters.esm.js

@@ -0,0 +1,114 @@
+/**
+ * UI Initiative Shutters Slider
+ *
+ * Infinite 3D carousel slider
+ *
+ * https://uiinitiative.com
+ *
+ * Copyright 2023 UI Initiative
+ *
+ * Released under the UI Initiative Regular License
+ *
+ * October 25, 2023
+ */
+
+if (typeof window !== 'undefined' && window.SwiperElementRegisterParams) {
+  window.SwiperElementRegisterParams(['shuttersEffect']);
+}
+
+export default function EffectShutters({ swiper, extendParams, on }) {
+  extendParams({
+    shuttersEffect: {
+      split: 5,
+    },
+  });
+
+  const createImages = () => {
+    swiper.slides.forEach((slideEl) => {
+      const imageEl = slideEl.querySelector('.swiper-shutters-image');
+      if (!imageEl) return;
+      const nextEl = imageEl.nextElementSibling;
+      const cloneContainerEl = document.createElement('div');
+      cloneContainerEl.classList.add('swiper-shutters-image-clones');
+      for (let i = 0; i < swiper.params.shuttersEffect.split; i += 1) {
+        const div = document.createElement('div');
+        div.classList.add('swiper-shutters-image-clone');
+        div.appendChild(imageEl.cloneNode());
+        cloneContainerEl.appendChild(div);
+      }
+      if (nextEl) {
+        imageEl.parentNode.insertBefore(cloneContainerEl, nextEl);
+      } else {
+        imageEl.parentNode.appendChild(cloneContainerEl);
+      }
+    });
+  };
+
+  const setImages = () => {
+    swiper.el.querySelectorAll('.swiper-shutters-image').forEach((imageEl) => {
+      imageEl.style.width = `${swiper.width}px`;
+      imageEl.style.height = `${swiper.height}px`;
+    });
+    swiper.el
+      .querySelectorAll('.swiper-slide, swiper-slide')
+      .forEach((slideEl) => {
+        slideEl
+          .querySelectorAll('.swiper-shutters-image-clone')
+          .forEach((cloneEl, cloneElIndex) => {
+            const percentagePerItem = 100 / swiper.params.shuttersEffect.split;
+            const cloneImg = cloneEl.querySelector('.swiper-shutters-image');
+            if (swiper.params.direction === 'vertical') {
+              cloneEl.style.height = `${
+                100 / swiper.params.shuttersEffect.split
+              }%`;
+              cloneEl.style.top = `${
+                (100 / swiper.params.shuttersEffect.split) * cloneElIndex
+              }%`;
+              cloneImg.style.top = `-${100 * cloneElIndex}%`;
+            } else {
+              cloneEl.style.width = `${
+                100 / swiper.params.shuttersEffect.split
+              }%`;
+              cloneEl.style.left = `${
+                (100 / swiper.params.shuttersEffect.split) * cloneElIndex
+              }%`;
+              cloneImg.style.left = `-${100 * cloneElIndex}%`;
+            }
+
+            cloneImg.setAttribute('data-swiper-parallax', '10%');
+
+            cloneEl.setAttribute(
+              'data-swiper-parallax',
+              `${
+                percentagePerItem *
+                (cloneElIndex + 1) *
+                (cloneElIndex % 2 === 0 ? 0.5 : -1)
+              }%`,
+            );
+          });
+      });
+  };
+
+  on('beforeInit', () => {
+    if (swiper.params.effect !== 'shutters') return;
+
+    swiper.classNames.push('swiper-shutters');
+
+    const overwriteParams = {
+      watchSlidesProgress: true,
+      parallax: { enabled: true },
+    };
+
+    Object.assign(swiper.params, overwriteParams);
+    Object.assign(swiper.originalParams, overwriteParams);
+  });
+  on('init', () => {
+    if (swiper.params.effect !== 'shutters') return;
+    createImages();
+  });
+
+  on('resize init', () => {
+    if (swiper.params.effect !== 'shutters') return;
+    setImages();
+  });
+}

package/src/build/lib/swiperjs/effect-slicer.css

@@ -0,0 +1,39 @@
+/**
+ * UI Initiative Slicer Slider
+ *
+ * Images slicer slider
+ *
+ * https://uiinitiative.com
+ *
+ * Copyright 2023 UI Initiative
+ *
+ * Released under the UI Initiative Regular License
+ *
+ * October 25, 2023
+ *
+ */
+
+.swiper-slicer .swiper-slide,
+.swiper-slicer swiper-slide {
+  overflow: hidden;
+}
+.swiper-slicer-image, .swiper-slicer-image-clones, .swiper-slicer-image-clone {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.swiper-slicer-image {
+  display: none;
+  object-fit: cover;
+  object-position: center;
+}
+.swiper-slicer-image-clone {
+  overflow: hidden;
+  transition-timing-function: cubic-bezier(1, 0, 0.5, 1);
+}
+.swiper-slicer-image-clone .swiper-slicer-image {
+  display: block;
+}

package/src/build/lib/swiperjs/effect-slicer.esm.js

@@ -0,0 +1,198 @@
+/**
+ * UI Initiative Slicer Slider
+ *
+ * Images slicer slider
+ *
+ * https://uiinitiative.com
+ *
+ * Copyright 2023 UI Initiative
+ *
+ * Released under the UI Initiative Regular License
+ *
+ * October 25, 2023
+ *
+ */
+
+if (typeof window !== 'undefined' && window.SwiperElementRegisterParams) {
+  window.SwiperElementRegisterParams(['slicerEffect']);
+}
+
+export default function EffectSlicer({ swiper, extendParams, on, emit }) {
+  extendParams({
+    slicerEffect: {
+      split: 5,
+    },
+  });
+
+  function effectVirtualTransitionEnd({ duration }) {
+    const { slides, activeIndex } = swiper;
+    if (duration !== 0) {
+      let eventTriggered = false;
+      const transitionEndTarget = slides[activeIndex].querySelector(
+        '.swiper-slicer-image-clone:nth-child(1)',
+      );
+      if (!transitionEndTarget) return;
+      const onTransitionEnd = (e) => {
+        if (e.target !== transitionEndTarget) return;
+        transitionEndTarget.removeEventListener(
+          'transitionend',
+          onTransitionEnd,
+        );
+        if (eventTriggered) return;
+        if (!swiper || swiper.destroyed) return;
+        eventTriggered = true;
+        swiper.animating = false;
+
+        const evt = new window.CustomEvent('transitionend', {
+          bubbles: true,
+          cancelable: true,
+        });
+        swiper.wrapperEl.dispatchEvent(evt);
+      };
+      transitionEndTarget.addEventListener('transitionend', onTransitionEnd);
+    }
+  }
+
+  const createImages = () => {
+    swiper.slides.forEach((slideEl) => {
+      if (slideEl.querySelector('.swiper-slicer-image-clones')) return;
+      const imageEl = slideEl.querySelector('.swiper-slicer-image');
+      if (!imageEl) return;
+      const nextEl = imageEl.nextElementSibling;
+      const cloneContainerEl = document.createElement('div');
+      cloneContainerEl.classList.add('swiper-slicer-image-clones');
+      for (let i = 0; i < swiper.params.slicerEffect.split; i += 1) {
+        const div = document.createElement('div');
+        div.classList.add('swiper-slicer-image-clone');
+        div.appendChild(imageEl.cloneNode());
+        cloneContainerEl.appendChild(div);
+      }
+      if (nextEl) {
+        imageEl.parentNode.insertBefore(cloneContainerEl, nextEl);
+      } else {
+        imageEl.parentNode.appendChild(cloneContainerEl);
+      }
+    });
+  };
+
+  const setImages = () => {
+    swiper.slides.forEach((slideEl) =>
+      slideEl.querySelectorAll('.swiper-slicer-image').forEach((imageEl) => {
+        imageEl.style.width = `${swiper.width}px`;
+        imageEl.style.height = `${swiper.height}px`;
+      }),
+    );
+    swiper.slides.forEach((slideEl) => {
+      slideEl
+        .querySelectorAll('.swiper-slicer-image-clone')
+        .forEach((cloneEl, cloneElIndex) => {
+          const cloneImg = cloneEl.querySelector('.swiper-slicer-image');
+          if (swiper.params.direction === 'horizontal') {
+            cloneEl.style.height = `${100 / swiper.params.slicerEffect.split}%`;
+            cloneEl.style.top = `${
+              (100 / swiper.params.slicerEffect.split) * cloneElIndex
+            }%`;
+            cloneImg.style.top = `-${100 * cloneElIndex}%`;
+          } else {
+            cloneEl.style.width = `${100 / swiper.params.slicerEffect.split}%`;
+            cloneEl.style.left = `${
+              (100 / swiper.params.slicerEffect.split) * cloneElIndex
+            }%`;
+            cloneImg.style.left = `-${100 * cloneElIndex}%`;
+          }
+        });
+    });
+  };
+
+  const setTranslate = () => {
+    const axis = swiper.params.direction === 'vertical' ? 'Y' : 'X';
+    swiper.slides.forEach((slideEl, slideIndex) => {
+      slideEl.style.transform = `translate${axis}(-${slideIndex * 100}%)`;
+      const slideProgress = slideEl.progress;
+      const contentEl = slideEl.querySelector('.swiper-slide-content');
+      if (contentEl) {
+        contentEl.style.transform = `translate${axis}(${
+          swiper.size * -slideProgress * 1.2
+        }px)`;
+      }
+      const images = slideEl.querySelectorAll('.swiper-slicer-image-clone');
+      images.forEach((imageEl) => {
+        const progress = -slideProgress;
+        imageEl.style.transform = `translate${axis}(${progress * 100}%)`;
+      });
+    });
+  };
+
+  const setTransition = (duration) => {
+    swiper.slides.forEach((slideEl) => {
+      const images = slideEl.querySelectorAll('.swiper-slicer-image-clone');
+      const contentEl = slideEl.querySelector('.swiper-slide-content');
+      if (contentEl) {
+        contentEl.style.transitionDuration = `${duration}ms`;
+      }
+      // eslint-disable-next-line
+
+      images.forEach((imageEl, imageIndex) => {
+        if (duration === 0) {
+          imageEl.style.transitionTimingFunction = 'ease-out';
+          imageEl.style.transitionDuration = `${
+            swiper.params.speed +
+            (swiper.params.speed / (images.length - 1)) *
+              (images.length - imageIndex - 1)
+          }ms`;
+        } else {
+          imageEl.style.transitionTimingFunction = '';
+          imageEl.style.transitionDuration = `${
+            duration +
+            (duration / (images.length - 1)) * (images.length - imageIndex - 1)
+          }ms`;
+        }
+      });
+    });
+
+    effectVirtualTransitionEnd({ duration });
+  };
+
+  on('setTranslate', () => {
+    if (swiper.params.effect !== 'slicer') return;
+
+    setTranslate();
+  });
+
+  on('setTransition', (_s, duration) => {
+    if (swiper.params.effect !== 'slicer') return;
+    setTransition(duration);
+  });
+
+  on('slidesLengthChange', () => {
+    createImages();
+    setImages();
+  });
+
+  on('beforeInit', () => {
+    if (swiper.params.effect !== 'slicer') return;
+
+    swiper.classNames.push('swiper-slicer');
+
+    const overwriteParams = {
+      slidesPerView: 1,
+      slidesPerGroup: 1,
+      watchSlidesProgress: true,
+      spaceBetween: 0,
+      virtualTranslate: true,
+    };
+
+    Object.assign(swiper.params, overwriteParams);
+    Object.assign(swiper.originalParams, overwriteParams);
+  });
+  on('init', () => {
+    if (swiper.params.effect !== 'slicer') return;
+    createImages();
+    emit('setTranslate', swiper, swiper.translate);
+  });
+
+  on('resize init', () => {
+    if (swiper.params.effect !== 'slicer') return;
+    setImages();
+  });
+}

package/src/build/lib/swiperjs/swiper-gl.css

@@ -0,0 +1,44 @@
+/**
+ * UI Initiative Swiper GL
+ *
+ * Stunning WebGL image transitions
+ *
+ * https://uiinitiative.com
+ *
+ * Copyright 2024 UI Initiative
+ *
+ * Released under the UI Initiative Regular License
+ *
+ * April 25, 2024
+ */
+
+.swiper-gl {
+  position: relative;
+  margin: 0 auto;
+  max-width: 100%;
+  overflow: hidden;
+}
+.swiper-gl .swiper-slide,
+.swiper-gl swiper-slide {
+  position: relative;
+}
+.swiper-gl .swiper-gl-image {
+  display: none;
+}
+.swiper-gl > canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-gl-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+}