swiper - npm Package Compare versions

Comparing version 9.1.1 to 9.2.0

components-shared/params-list.js

 /* underscore in name -> watch for changes */
-const paramsList = ['eventsPrefix', 'modules', 'init', '_direction', 'oneWayMovement', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopedSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideNextClass', 'slidePrevClass', 'wrapperClass', 'lazyPreloaderClass', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
+const paramsList = ['eventsPrefix', 'modules', 'init', '_direction', 'oneWayMovement', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopedSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideNextClass', 'slidePrevClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
 // modules
 'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control', 'injectStyles', 'injectStylesUrls'];
 export { paramsList };

core/core.js

 /* eslint no-param-reassign: "off" */
 import { getDocument } from 'ssr-window';
-import { extend, now, deleteProps, createElement, elementChildren, elementStyle, elementIndex } from '../shared/utils.js';
+import { extend, deleteProps, createElement, elementChildren, elementStyle, elementIndex } from '../shared/utils.js';
 import { getSupport } from '../shared/get-support.js';
@@ -22,3 +22,3 @@ import { getDevice } from '../shared/get-device.js';
 import moduleExtendParams from './moduleExtendParams.js';
-import { processLazyPreloader } from '../shared/process-lazy-preloader.js';
+import { processLazyPreloader, preload } from '../shared/process-lazy-preloader.js';
 const prototypes = {
@@ -154,3 +154,3 @@ eventsEmitter,
         // Last click time
-        lastClickTime: now(),
+        lastClickTime: 0,
         clickTimeout: undefined,
@@ -502,5 +502,7 @@ // Velocities
     });
+    preload(swiper);
 
     // Init Flag
     swiper.initialized = true;
+    preload(swiper);
 
@@ -507,0 +509,0 @@ // Emit

core/defaults.js

@@ -112,2 +112,3 @@ export default {
   lazyPreloaderClass: 'swiper-lazy-preloader',
+  lazyPreloadPrevNext: 0,
   // Callbacks
@@ -114,0 +115,0 @@ runCallbacksOnInit: true,

core/update/updateActiveIndex.js

@@ -0,1 +1,2 @@
+import { preload } from '../../shared/process-lazy-preloader.js';
 export function getActiveIndexByTranslate(swiper) {
@@ -82,2 +83,5 @@ const {
   });
+  if (swiper.initialized) {
+    preload(swiper);
+  }
   swiper.emit('activeIndexChange');
@@ -84,0 +88,0 @@ swiper.emit('snapIndexChange');

element/swiper-element-bundle.js

 /**
- * Swiper Custom Element 9.1.1
+ * Swiper Custom Element 9.2.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -10,3 +10,3 @@ * https://swiperjs.com
  *
- * Released on: March 16, 2023
+ * Released on: March 31, 2023
  */
@@ -13,0 +13,0 @@

element/swiper-element.js

 /**
- * Swiper Custom Element 9.1.1
+ * Swiper Custom Element 9.2.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -10,3 +10,3 @@ * https://swiperjs.com
  *
- * Released on: March 16, 2023
+ * Released on: March 31, 2023
  */
@@ -13,0 +13,0 @@

modules/controller/controller.js

@@ -71,2 +71,4 @@ /* eslint no-bitwise: ["error", { "allow": [">>"] }] */
     function setControlledTranslate(c) {
+      if (c.destroyed) return;
+
       // this will create an Interpolate function based on the snapGrids
@@ -110,2 +112,3 @@ // x is the Grid of the scrolled scroller and y will be the controlled scroller
     function setControlledTransition(c) {
+      if (c.destroyed) return;
       c.setTransition(duration, swiper);
@@ -112,0 +115,0 @@ if (duration !== 0) {

modules/zoom/zoom.js

@@ -29,2 +29,4 @@ import { getWindow } from 'ssr-window';
   const gesture = {
+    originX: 0,
+    originY: 0,
     slideEl: undefined,
@@ -143,3 +145,4 @@ slideWidth: undefined,
       const [originX, originY] = getScaleOrigin();
-      gesture.imageEl.style.transformOrigin = `${originX}px ${originY}px`;
+      gesture.originX = originX;
+      gesture.originY = originY;
       gesture.imageEl.style.transitionDuration = '0ms';
@@ -190,3 +193,12 @@ }
     isScaling = false;
-    if (zoom.scale === 1) gesture.slideEl = undefined;
+    if (zoom.scale > 1 && gesture.slideEl) {
+      gesture.slideEl.classList.add(`${params.zoomedSlideClass}`);
+    } else if (zoom.scale <= 1 && gesture.slideEl) {
+      gesture.slideEl.classList.remove(`${params.zoomedSlideClass}`);
+    }
+    if (zoom.scale === 1) {
+      gesture.originX = 0;
+      gesture.originY = 0;
+      gesture.slideEl = undefined;
+    }
   }
@@ -199,4 +211,5 @@ function onTouchStart(e) {
     image.isTouched = true;
-    image.touchesStart.x = e.pageX;
-    image.touchesStart.y = e.pageY;
+    const event = evCache.length > 0 ? evCache[0] : e;
+    image.touchesStart.x = event.pageX;
+    image.touchesStart.y = event.pageY;
   }
@@ -207,3 +220,2 @@ function onTouchMove(e) {
     if (!gesture.imageEl) return;
-    swiper.allowClick = false;
     if (!image.isTouched || !gesture.slideEl) return;
@@ -229,2 +241,6 @@ if (!image.isMoved) {
     image.touchesCurrent.y = evCache.length > 0 ? evCache[0].pageY : e.pageY;
+    const touchesDiff = Math.max(Math.abs(image.touchesCurrent.x - image.touchesStart.x), Math.abs(image.touchesCurrent.y - image.touchesStart.y));
+    if (touchesDiff > 5) {
+      swiper.allowClick = false;
+    }
     if (!image.isMoved && !isScaling) {
@@ -245,4 +261,9 @@ if (swiper.isHorizontal() && (Math.floor(image.minX) === Math.floor(image.startX) && image.touchesCurrent.x < image.touchesStart.x || Math.floor(image.maxX) === Math.floor(image.startX) && image.touchesCurrent.x > image.touchesStart.x)) {
     image.isMoved = true;
-    image.currentX = image.touchesCurrent.x - image.touchesStart.x + image.startX;
-    image.currentY = image.touchesCurrent.y - image.touchesStart.y + image.startY;
+    const scaleRatio = (zoom.scale - currentScale) / (gesture.maxRatio - swiper.params.zoom.minRatio);
+    const {
+      originX,
+      originY
+    } = gesture;
+    image.currentX = image.touchesCurrent.x - image.touchesStart.x + image.startX + scaleRatio * (image.width - originX * 2);
+    image.currentY = image.touchesCurrent.y - image.touchesStart.y + image.startY + scaleRatio * (image.height - originY * 2);
     if (image.currentX < image.minX) {
@@ -297,3 +318,2 @@ image.currentX = image.minX + 1 - (image.minX - image.currentX + 1) ** 0.8;
     image.currentY = newPositionY;
-
     // Define if we need image drag
@@ -313,3 +333,3 @@ const scaledWidth = image.width * zoom.scale;
     const zoom = swiper.zoom;
-    if (gesture.slideEl && swiper.previousIndex !== swiper.activeIndex) {
+    if (gesture.slideEl && swiper.activeIndex !== swiper.slides.indexOf(gesture.slideEl)) {
       if (gesture.imageEl) {
@@ -321,2 +341,3 @@ gesture.imageEl.style.transform = 'translate3d(0,0,0) scale(1)';
       }
+      gesture.slideEl.classList.remove(`${swiper.params.zoom.zoomedSlideClass}`);
       zoom.scale = 1;
@@ -327,2 +348,4 @@ currentScale = 1;
       gesture.imageWrapEl = undefined;
+      gesture.originX = 0;
+      gesture.originY = 0;
     }
@@ -426,2 +449,6 @@ }
     }
+    if (forceZoomRatio && zoom.scale === 1) {
+      gesture.originX = 0;
+      gesture.originY = 0;
+    }
     gesture.imageWrapEl.style.transitionDuration = '300ms';
@@ -465,2 +492,4 @@ gesture.imageWrapEl.style.transform = `translate3d(${translateX}px, ${translateY}px,0)`;
     gesture.slideEl = undefined;
+    gesture.originX = 0;
+    gesture.originY = 0;
   }
@@ -505,3 +534,2 @@
     // Scale image
-
     swiper.wrapperEl.addEventListener('pointerdown', onGestureStart, passiveListener);
@@ -508,0 +536,0 @@ swiper.wrapperEl.addEventListener('pointermove', onGestureChange, activeListenerWithCapture);

package.json

 {
   "name": "swiper",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
@@ -189,3 +189,3 @@ "typings": "swiper.d.ts",
   },
-  "releaseDate": "March 16, 2023"
+  "releaseDate": "March 31, 2023"
 }

react/swiper-react.d.ts

@@ -59,5 +59,2 @@ import * as React from 'react';
   onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
-   * Event will be fired on mousewheel scroll
-   */
-  onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
    * Event will be fired on navigation hide
@@ -78,2 +75,5 @@ */
   onNavigationNext?: (swiper: SwiperClass) => void;/**
+   * Event will be fired on mousewheel scroll
+   */
+  onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
    * Event will be fired after pagination rendered
@@ -80,0 +80,0 @@ */

react/swiper-react.js

 /**
- * Swiper React 9.1.1
+ * Swiper React 9.2.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -10,3 +10,3 @@ * https://swiperjs.com
  *
- * Released on: March 16, 2023
+ * Released on: March 31, 2023
  */
@@ -13,0 +13,0 @@

shared/process-lazy-preloader.js

@@ -9,2 +9,27 @@ export const processLazyPreloader = (swiper, imageEl) => {
   }
+};
+const unlazy = (swiper, index) => {
+  if (!swiper.slides[index]) return;
+  const imageEl = swiper.slides[index].querySelector('[loading="lazy"]');
+  if (imageEl) imageEl.removeAttribute('loading');
+};
+export const preload = swiper => {
+  if (!swiper || swiper.destroyed || !swiper.params) return;
+  let amount = swiper.params.lazyPreloadPrevNext;
+  const len = swiper.slides.length;
+  if (!len || !amount || amount < 0) return;
+  amount = Math.min(amount, len);
+  const slidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(swiper.params.slidesPerView);
+  const activeIndex = swiper.activeIndex;
+  const slideIndexLastInView = activeIndex + slidesPerView - 1;
+  if (swiper.params.rewind) {
+    for (let i = activeIndex - amount; i <= slideIndexLastInView + amount; i += 1) {
+      const realIndex = (i % len + len) % len;
+      if (realIndex !== activeIndex && realIndex > slideIndexLastInView) unlazy(swiper, realIndex);
+    }
+  } else {
+    for (let i = Math.max(slideIndexLastInView - amount, 0); i <= Math.min(slideIndexLastInView + amount, len - 1); i += 1) {
+      if (i !== activeIndex && i > slideIndexLastInView) unlazy(swiper, i);
+    }
+  }
 };

swiper-bundle.esm.js

 /**
- * Swiper 9.1.1
+ * Swiper 9.2.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -10,3 +10,3 @@ * https://swiperjs.com
  *
- * Released on: March 16, 2023
+ * Released on: March 31, 2023
  */
@@ -13,0 +13,0 @@

swiper.esm.js

 /**
- * Swiper 9.1.1
+ * Swiper 9.2.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -10,3 +10,3 @@ * https://swiperjs.com
  *
- * Released on: March 16, 2023
+ * Released on: March 31, 2023
  */
@@ -13,0 +13,0 @@

types/modules/controller.d.ts

@@ -18,3 +18,3 @@ import Swiper from '../swiper-class';
    */
-  control?: Swiper | Swiper[] | string | HTMLElement;
+  control?: Swiper | Swiper[] | string | HTMLElement | null;
 
@@ -21,0 +21,0 @@ /**

types/modules/pagination.d.ts

@@ -150,3 +150,3 @@ import { CSSSelector } from '../shared';
    */
-  renderBullet?: (index: number, className: string) => void;
+  renderBullet?: (index: number, className: string) => string;
 
@@ -170,3 +170,3 @@ /**
    */
-  renderFraction?: (currentClass: string, totalClass: string) => void;
+  renderFraction?: (currentClass: string, totalClass: string) => string;
 
@@ -188,3 +188,3 @@ /**
    */
-  renderProgressbar?: (progressbarFillClass: string) => void;
+  renderProgressbar?: (progressbarFillClass: string) => string;
 
@@ -207,3 +207,3 @@ /**
    */
-  renderCustom?: (swiper: Swiper, current: number, total: number) => void;
+  renderCustom?: (swiper: Swiper, current: number, total: number) => string;
 
@@ -210,0 +210,0 @@ /**

types/swiper-options.d.ts

@@ -824,2 +824,9 @@ import { A11yOptions } from './modules/a11y';
   /**
+   * Number of next and previous slides to preload. Only applicable if using lazy loading.
+   *
+   * @default 0
+   */
+  lazyPreloadPrevNext?: number;
+
+  /**
    * Object with a11y parameters or boolean `true` to enable with default settings.
@@ -826,0 +833,0 @@ *

vue/swiper-vue.d.ts

@@ -321,2 +321,6 @@ import {
     };
+    lazyPreloadPrevNext: {
+      type: NumberConstructor;
+      default: undefined;
+    };
     runCallbacksOnInit: {
@@ -463,5 +467,2 @@ type: BooleanConstructor;
   keyPress: (swiper: SwiperClass, keyCode: string) => void;/**
-   * Event will be fired on mousewheel scroll
-   */
-  scroll: (swiper: SwiperClass, event: WheelEvent) => void;/**
    * Event will be fired on navigation hide
@@ -482,2 +483,5 @@ */
   navigationNext: (swiper: SwiperClass) => void;/**
+   * Event will be fired on mousewheel scroll
+   */
+  scroll: (swiper: SwiperClass, event: WheelEvent) => void;/**
    * Event will be fired after pagination rendered
@@ -484,0 +488,0 @@ */

vue/swiper-vue.js

 /**
- * Swiper Vue 9.1.1
+ * Swiper Vue 9.2.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -10,3 +10,3 @@ * https://swiperjs.com
  *
- * Released on: March 16, 2023
+ * Released on: March 31, 2023
  */
@@ -13,0 +13,0 @@

vue/swiper.js

@@ -338,2 +338,6 @@ import { h, ref, onMounted, onUpdated, onBeforeUnmount, watch, nextTick, provide } from 'vue';
     },
+    lazyPreloadPrevNext: {
+      type: Number,
+      default: undefined
+    },
     runCallbacksOnInit: {
@@ -340,0 +344,0 @@ type: Boolean,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5127346

increased by0.83%

Lines of code

50750

increased by0.63%

No dependency changes