swiper - npm Package Compare versions

Comparing version 11.0.0-beta.1 to 11.0.0-beta.2

package.json

 {
   "name": "swiper",
-  "version": "11.0.0-beta.1",
+  "version": "11.0.0-beta.2",
   "description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
@@ -135,6 +135,2 @@ "typings": "swiper.d.ts",
     },
-    "./react/bundle": {
-      "types": "./swiper-react.d.ts",
-      "default": "./swiper-react-bundle.mjs"
-    },
     "./vue": {
@@ -144,6 +140,2 @@ "types": "./swiper-vue.d.ts",
     },
-    "./vue/bundle": {
-      "types": "./swiper-vue.d.ts",
-      "default": "./swiper-vue-bundle.mjs"
-    },
     "./modules": {
@@ -217,3 +209,3 @@ "types": "./types/modules/index.d.ts",
   },
-  "releaseDate": "September 20, 2023"
+  "releaseDate": "October 23, 2023"
 }

README.md

@@ -0,0 +0,0 @@ Swiper

swiper-element.d.ts

 // @ts-ignore
-import { SwiperOptions, Swiper } from './types/index.d.ts';
+import { Swiper, SwiperOptions } from './types/index.d.ts';
 
@@ -32,5 +32,2 @@ declare const register: () => void;
   autoplay: CustomEvent<[swiper: Swiper]>;/**
-   * Event will be fired on key press
-   */
-  keypress: CustomEvent<[swiper: Swiper, keyCode: string]>;/**
    * Event will be fired on window hash change
@@ -43,21 +40,20 @@ */
   hashset: CustomEvent<[swiper: Swiper]>;/**
-   * Event will be fired on mousewheel scroll
+   * Event will be fired on key press
    */
-  scroll: CustomEvent<[swiper: Swiper, event: WheelEvent]>;/**
-   * Event will be fired on draggable scrollbar drag start
+  keypress: CustomEvent<[swiper: Swiper, keyCode: string]>;/**
+   * Event will be fired on navigation hide
    */
-  scrollbardragstart: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
-
+  navigationhide: CustomEvent<[swiper: Swiper]>;
   /**
-   * Event will be fired on draggable scrollbar drag move
+   * Event will be fired on navigation show
    */
-  scrollbardragmove: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
-
+  navigationshow: CustomEvent<[swiper: Swiper]>;
   /**
-   * Event will be fired on draggable scrollbar drag end
+   * Event will be fired on navigation prev button click
    */
-  scrollbardragend: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;/**
-   * Event will be fired on zoom change
+  navigationprev: CustomEvent<[swiper: Swiper]>;
+  /**
+   * Event will be fired on navigation next button click
    */
-  zoomchange: CustomEvent<[swiper: Swiper, scale: number, imageEl: HTMLElement, slideEl: HTMLElement]>;/**
+  navigationnext: CustomEvent<[swiper: Swiper]>;/**
    * Event will be fired after pagination rendered
@@ -81,17 +77,21 @@ */
   paginationshow: CustomEvent<[swiper: Swiper]>;/**
-   * Event will be fired on navigation hide
+   * Event will be fired on mousewheel scroll
    */
-  navigationhide: CustomEvent<[swiper: Swiper]>;
-  /**
-   * Event will be fired on navigation show
+  scroll: CustomEvent<[swiper: Swiper, event: WheelEvent]>;/**
+   * Event will be fired on draggable scrollbar drag start
    */
-  navigationshow: CustomEvent<[swiper: Swiper]>;
+  scrollbardragstart: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
+
   /**
-   * Event will be fired on navigation prev button click
+   * Event will be fired on draggable scrollbar drag move
    */
-  navigationprev: CustomEvent<[swiper: Swiper]>;
+  scrollbardragmove: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;
+
   /**
-   * Event will be fired on navigation next button click
+   * Event will be fired on draggable scrollbar drag end
    */
-  navigationnext: CustomEvent<[swiper: Swiper]>;
+  scrollbardragend: CustomEvent<[swiper: Swiper, event: MouseEvent | TouchEvent | PointerEvent]>;/**
+   * Event will be fired on zoom change
+   */
+  zoomchange: CustomEvent<[swiper: Swiper, scale: number, imageEl: HTMLElement, slideEl: HTMLElement]>;
 
@@ -409,2 +409,3 @@
   injectStylesUrls: string[];
+  eventsPrefix: string;
   addEventListener<K extends keyof SwiperContainerEventMap>(
@@ -436,2 +437,9 @@ type: K,
 
-export { register, SwiperContainer, SwiperSlide };
+declare global {
+  interface HTMLElementTagNameMap {
+    'swiper-container': SwiperContainer;
+    'swiper-slide': SwiperSlide;
+  }
+}
+
+export { SwiperContainer, SwiperSlide, register };

swiper-react.d.ts

 import * as React from 'react';
 
 import type { SwiperOptions, Swiper as SwiperClass } from './types/index.d.ts';
-import { SwiperContainer, SwiperSlide } from './swiper-element.js';
 
 type SwiperProps = Omit<
-  React.HTMLAttributes<SwiperContainer>,
+  React.HTMLAttributes<HTMLElement>,
   | 'onProgress'
@@ -63,5 +62,2 @@ | 'onClick'
   onAutoplay?: (swiper: SwiperClass) => void;/**
-   * Event will be fired on key press
-   */
-  onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
    * Event will be fired on window hash change
@@ -74,21 +70,20 @@ */
   onHashSet?: (swiper: SwiperClass) => void;/**
-   * Event will be fired on mousewheel scroll
+   * Event will be fired on key press
    */
-  onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
-   * Event will be fired on draggable scrollbar drag start
+  onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
+   * Event will be fired on navigation hide
    */
-  onScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-
+  onNavigationHide?: (swiper: SwiperClass) => void;
   /**
-   * Event will be fired on draggable scrollbar drag move
+   * Event will be fired on navigation show
    */
-  onScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-
+  onNavigationShow?: (swiper: SwiperClass) => void;
   /**
-   * Event will be fired on draggable scrollbar drag end
+   * Event will be fired on navigation prev button click
    */
-  onScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
-   * Event will be fired on zoom change
+  onNavigationPrev?: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on navigation next button click
    */
-  onZoomChange?: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;/**
+  onNavigationNext?: (swiper: SwiperClass) => void;/**
    * Event will be fired after pagination rendered
@@ -112,17 +107,21 @@ */
   onPaginationShow?: (swiper: SwiperClass) => void;/**
-   * Event will be fired on navigation hide
+   * Event will be fired on mousewheel scroll
    */
-  onNavigationHide?: (swiper: SwiperClass) => void;
-  /**
-   * Event will be fired on navigation show
+  onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;/**
+   * Event will be fired on draggable scrollbar drag start
    */
-  onNavigationShow?: (swiper: SwiperClass) => void;
+  onScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
   /**
-   * Event will be fired on navigation prev button click
+   * Event will be fired on draggable scrollbar drag move
    */
-  onNavigationPrev?: (swiper: SwiperClass) => void;
+  onScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
   /**
-   * Event will be fired on navigation next button click
+   * Event will be fired on draggable scrollbar drag end
    */
-  onNavigationNext?: (swiper: SwiperClass) => void;
+  onScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
+   * Event will be fired on zoom change
+   */
+  onZoomChange?: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
     
@@ -443,7 +442,42 @@ /**
 
-type SwiperSlideProps = Omit<React.HTMLAttributes<SwiperSlide>, 'children'> & {
+type SwiperSlideProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
+  /**
+   * Slide tag
+   *
+   * @default 'div'
+   */
+  tag?: string;
+
+  /**
+   * Enables additional wrapper required for zoom mode
+   *
+   * @default false
+   */
+  zoom?: boolean;
+
+  /**
+   * Adds lazy preloader to the slide
+   *
+   * @default false
+   */
+  lazy?: boolean;
+
+  /**
+   * Slide's index in slides array/collection
+   *
+   * @default false
+   */
+  virtualIndex?: number;
+
+  /**
+   * Slide's child element or render function
+   *
+   * @default undefined
+   */
   children?: React.ReactNode | ((slideData: SlideData) => React.ReactNode);
 };
 
-interface SwiperRef extends React.HTMLAttributes<SwiperContainer> {}
+interface SwiperRef extends React.HTMLAttributes<HTMLElement> {
+  swiper: SwiperClass;
+}
 
@@ -450,0 +484,0 @@ declare const Swiper: React.FunctionComponent<

swiper-vue.d.ts

@@ -25,3 +25,3 @@ import type {
 } from './types/index.d.ts';
-import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+import { ComponentOptionsMixin, DefineComponent, PropType, Ref } from 'vue';
 import type { SwiperOptions, Swiper as SwiperClass } from './types/index.d.ts';
@@ -256,3 +256,4 @@
     loop: { type: BooleanConstructor; default: undefined };
-    loopedSlides: {
+    loopAddBlankSlides: { type: BooleanConstructor; default: undefined };
+    loopAdditionalSlides: {
       type: NumberConstructor;
@@ -307,2 +308,10 @@ default: undefined;
     };
+    slideFullyVisibleClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
+    slideBlankClass: {
+      type: StringConstructor;
+      default: undefined;
+    };
     slideNextClass: {
@@ -459,5 +468,2 @@ type: StringConstructor;
   autoplay: (swiper: SwiperClass) => void;/**
-   * Event will be fired on key press
-   */
-  keyPress: (swiper: SwiperClass, keyCode: string) => void;/**
    * Event will be fired on window hash change
@@ -470,21 +476,20 @@ */
   hashSet: (swiper: SwiperClass) => void;/**
-   * Event will be fired on mousewheel scroll
+   * Event will be fired on key press
    */
-  scroll: (swiper: SwiperClass, event: WheelEvent) => void;/**
-   * Event will be fired on draggable scrollbar drag start
+  keyPress: (swiper: SwiperClass, keyCode: string) => void;/**
+   * Event will be fired on navigation hide
    */
-  scrollbarDragStart: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-
+  navigationHide: (swiper: SwiperClass) => void;
   /**
-   * Event will be fired on draggable scrollbar drag move
+   * Event will be fired on navigation show
    */
-  scrollbarDragMove: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-
+  navigationShow: (swiper: SwiperClass) => void;
   /**
-   * Event will be fired on draggable scrollbar drag end
+   * Event will be fired on navigation prev button click
    */
-  scrollbarDragEnd: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
-   * Event will be fired on zoom change
+  navigationPrev: (swiper: SwiperClass) => void;
+  /**
+   * Event will be fired on navigation next button click
    */
-  zoomChange: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;/**
+  navigationNext: (swiper: SwiperClass) => void;/**
    * Event will be fired after pagination rendered
@@ -508,17 +513,21 @@ */
   paginationShow: (swiper: SwiperClass) => void;/**
-   * Event will be fired on navigation hide
+   * Event will be fired on mousewheel scroll
    */
-  navigationHide: (swiper: SwiperClass) => void;
-  /**
-   * Event will be fired on navigation show
+  scroll: (swiper: SwiperClass, event: WheelEvent) => void;/**
+   * Event will be fired on draggable scrollbar drag start
    */
-  navigationShow: (swiper: SwiperClass) => void;
+  scrollbarDragStart: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
   /**
-   * Event will be fired on navigation prev button click
+   * Event will be fired on draggable scrollbar drag move
    */
-  navigationPrev: (swiper: SwiperClass) => void;
+  scrollbarDragMove: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+
   /**
-   * Event will be fired on navigation next button click
+   * Event will be fired on draggable scrollbar drag end
    */
-  navigationNext: (swiper: SwiperClass) => void;
+  scrollbarDragEnd: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
+   * Event will be fired on zoom change
+   */
+  zoomChange: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
     
@@ -847,2 +856,10 @@ /**
 
-export { Swiper, SwiperSlide };
+declare const useSwiper: () => Ref<SwiperClass>;
+declare const useSwiperSlide: () => Ref<{
+  isActive: boolean;
+  isVisible: boolean;
+  isPrev: boolean;
+  isNext: boolean;
+}>;
+
+export { Swiper, SwiperSlide, useSwiper, useSwiperSlide };

types/modules/a11y.d.ts

@@ -0,0 +0,0 @@ export interface A11yMethods {}

types/modules/effect-cube.d.ts

@@ -0,0 +0,0 @@ export interface CubeEffectMethods {}

types/modules/free-mode.d.ts

@@ -0,0 +0,0 @@ export interface FreeModeMethods {

types/modules/grid.d.ts

@@ -9,4 +9,2 @@ export interface GridMethods {}
    *
-   * @note `rows` > 1 is currently not compatible with loop mode (`loop: true`)
-   *
    * @default 1
@@ -19,2 +17,4 @@ */
    *
+   * @note `row` fill is currently not compatible with loop mode (`loop: true`)
+   *
    * @default 'column'
@@ -21,0 +21,0 @@ */

types/modules/history.d.ts

@@ -0,0 +0,0 @@ export interface HistoryMethods {}

types/modules/manipulation.d.ts

@@ -0,0 +0,0 @@ export interface ManipulationMethods {

types/modules/parallax.d.ts

@@ -0,0 +0,0 @@ export interface ParallaxMethods {}

types/shared.d.ts

@@ -0,0 +0,0 @@ export interface CSSSelector extends String {}

types/swiper-options.d.ts

@@ -631,4 +631,8 @@ import type { A11yOptions } from './modules/a11y.d.ts';
    *
-   * Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be >= slidesPerView * 2
+   * Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be:
    *
+   * - >= `slidesPerView` + `slidesPerGroup`
+   * - even to `slidesPerGroup` (or use `loopAddBlankSlides` parameter)
+   * - even to `grid.rows` (or use `loopAddBlankSlides` parameter)
+   *
    * @default false
@@ -640,9 +644,18 @@ *
   /**
-   * Defines how many slides before end/beginning it should rearrange (loop) slides. If not specified, defaults to `slidesPerView`
+   * Automatically adds blank slides if you use Grid or `slidesPerGroup` and the total amount of slides is not even to `slidesPerGroup` or to `grid.rows`
    *
-   * @default null
+   *
+   * @default false
+   *
    */
-  loopedSlides?: number | null;
+  loopAddBlankSlides?: boolean;
 
   /**
+   * Allows to increase amount of looped slides
+   *
+   * @default 0
+   */
+  loopAdditionalSlides?: number;
+
+  /**
    * If enabled then slideNext/Prev will do nothing while slider is animating in loop mode
@@ -779,3 +792,3 @@ *
   /**
-   * CSS class name of currently visible slide
+   * CSS class name of currently/partially visible slide
    *
@@ -791,2 +804,20 @@ * @default 'swiper-slide-visible'
   /**
+   * CSS class name of fully (when whole slide is in the viewport) visible slide
+   *
+   * @default 'swiper-slide-fully-visible'
+   *
+   * @note Not supported in Swiper React/Vue
+   */
+  slideFullyVisibleClass?: string;
+
+  /**
+   * CSS class name of the blank slide added by the loop mode (when `loopAddBlankSlides` is enabled)
+   *
+   * @default 'swiper-slide-blank'
+   *
+   * @note Not supported in Swiper React/Vue
+   */
+  slideBlankClass?: string;
+
+  /**
    * CSS class name of slide which is right after currently active slide
@@ -793,0 +824,0 @@ *

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

3281350

increased by4.03%

Number of package files

317

increased by0.32%

Lines of code

49580

increased by3.98%

No dependency changes