nolimits4web/swiper

This system is Swiper v14, a modernized JavaScript library for creating responsive image and content sliders. It provides a core sliding engine with extensive modules for navigation, pagination, effects, and accessibility, alongside dedicated wrappers for React, Vue, and Web Components. The library is built as an ES module with strict TypeScript types, supporting features like grid layouts, virtual slides, and server-side rendering.

10 changes.

The project underwent a comprehensive rewrite to TypeScript, replacing the legacy JavaScript codebase with stricter types and a modern build system based on native ES modules and Vite. This period introduced new React and Vue component wrappers with context-based APIs, updated browser baselines, and migrated all development playgrounds to streamline testing and improve performance.

16 changes.

This period focused on migrating numerous Swiper modules from JavaScript and LESS/SCSS to TypeScript and native CSS, introducing strict typing and dedicated style files. The work also included adding new features like multi-row grid layouts and out-in fade transitions, while fixing behavioral issues in effects, pagination, and zoom interactions.

11 changes.

The core library and shared utilities were rewritten in TypeScript, introducing modern browser APIs like ResizeObserver and Pointer Events while refining element offset calculations. Comprehensive testing was added to verify the public API contract, ensure correct TypeScript type augmentations across various module resolution modes, and validate server-side rendering and real-DOM behavior.

The parallax and free-mode modules now include dedicated TypeScript definition files (parallax.ts, free-mode.ts) and CSS styles (parallax.css, free-mode.css). For the parallax module, this introduces typed options for enabling parallax effects and defines the internal logic for applying transforms based on slide progress, while the free-mode module gains typed configuration for momentum, bounce, and sticky snapping behaviors along with the necessary CSS for smooth transitions.

src/modules/parallax · high confidence

The fade effect module has been rewritten in TypeScript and now includes a new 'out-in' transition mode. Users can set \fadeEffect.mode\ to 'out-in' to make the current slide fade out completely before the new slide begins fading in, distinct from the existing 'default' and 'cross-fade' modes. The legacy \crossFade\ boolean option is now deprecated in favor of \mode: 'cross-fade'\. Additionally, the module's styles have been migrated from preprocessor formats to standard CSS.

src/modules/effect-fade · high confidence

The grid module has been migrated from JavaScript to TypeScript and now includes a new CSS file defining flex-wrap behaviors for grid wrappers. This change introduces a \grid\ configuration option allowing users to enable multi-row layouts by specifying the number of rows and how slides fill them (by row or column), fundamentally changing how the slider arranges content in a grid pattern.

src/modules/grid · high confidence

A new playground environment for the Swiper Element API has been added, providing a local development setup using Vite. This includes an index.html file that demonstrates the swiper-container with navigation and slides, along with a vite.config.js that aliases local source files to the built distribution bundles for easier testing and debugging.

playground/element · high confidence

The library now provides new React and Vue component wrappers that replace the previous implementations. These wrappers introduce a context system (SwiperContext and SwiperSlideContext) exposing the Swiper instance and slide state (isActive, isVisible, isFullyVisible, isPrev, isNext) via hooks (useSwiper, useSwiperSlide). The React implementation includes a new SwiperSlide component supporting render props, virtual indexing, and lazy loading, while the Vue implementation mirrors this with its own context and slide handling. The diff also shows the addition of TypeScript declaration files for these new wrappers (swiper-react.d.ts, swiper-vue.d.ts) and the removal of the old wrapper structures.

src · high confidence

The playground/core area now provides a dedicated interactive demo environment for testing Swiper core features. A new index.html serves as a basic starter page, while a new profile.html introduces a drag-compute profiler that allows users to simulate performance under various configurations (slide count, slidesPerView, watchSlidesProgress, freeMode, parallax) via a control bar and URL parameters. The build system for this location has been migrated from webpack to Vite, configured via a new vite.config.js that aliases the 'swiper' module to the local dist directory for immediate testing of core changes.

playground/core · high confidence

The a11y module has been migrated from LESS/SCSS to a dedicated CSS file (a11y.css) and the implementation logic has been converted to TypeScript (a11y.ts). This change introduces strict typing for all accessibility options (such as screen reader messages and roles) and ensures the notification element is properly styled and hidden from visual interaction while remaining accessible to assistive technologies.

src/modules/a11y · high confidence

The Autoplay, Controller, and Thumbs modules have been migrated from JavaScript to TypeScript, introducing strict type definitions for configuration options, public methods, and events. This change ensures better type safety and IDE support for users configuring these features. Additionally, the modules now ship with dedicated CSS files (autoplay.css, controller.css, thumbs.css) to handle their visual styles, replacing the previous LESS/SCSS approach.

src/modules/autoplay, src/modules/controller, src/modules/thumbs · high confidence

The Cards effect module now uses plain CSS files instead of preprocessor styles, and the transform logic has been corrected to prevent invalid CSS calc() expressions when the perSlideOffset is low. This ensures the 3D card rotation and offset animations render correctly without syntax errors in the browser.

src/modules/effect-cards · high confidence

The Observer and Resize core modules have been rewritten in TypeScript, introducing stricter typing and modernizing the underlying browser APIs. The Observer module now uses native MutationObserver with specific configuration options for attributes, childList, and characterData, while optimizing update emissions to trigger only once per batch of mutations via requestAnimationFrame or setTimeout fallbacks. The Resize module replaces the legacy window resize and orientationchange event listeners with the ResizeObserver API when available, providing more accurate size detection and handling older Safari versions (≤15) that expose contentBoxSize as a single object rather than an array. These changes improve performance and reliability for dynamic content and layout changes.

src/core/modules/observer, src/core/modules/resize · high confidence

The core library has been rewritten in TypeScript, introducing a new breakpoint system that dynamically adjusts layout, navigation, and pagination based on window or container width. Touch interactions now support Pointer Events alongside touch events, with improved handling for nested swipers and edge swipes. The loop module has been refactored to better manage slide duplication and index fixing, while the event system now uses a centralized emitter for more consistent event handling across the library.

src/core · high confidence

The demo files have been rewritten to use ES module imports from 'swiper/swiper-bundle.mjs' and 'swiper/swiper-bundle.css' instead of previous script tag methods. Additionally, the HTML structure now uses the 'swiper' class for the container element, replacing the legacy 'swiper-container' class name to align with the library's updated API.

demos · high confidence

The coverflow, creative, and flip effect modules have been rewritten in TypeScript and now use standard CSS files instead of LESS or SCSS. This migration introduces strict TypeScript types for effect options (such as coverflow's rotate/depth parameters, creative's custom transforms, and flip's shadow settings) and ensures the effects are properly augmented in the Swiper core interfaces. Users benefit from improved type safety and IDE autocomplete for these effects, while the styling is now delivered via plain CSS without requiring a preprocessor.

src/modules/effect-coverflow, src/modules/effect-creative, src/modules/effect-flip · high confidence

The hash-navigation module has been migrated from JavaScript/LESS to TypeScript and CSS. This change introduces strict TypeScript types for configuration options (enabled, replaceState, watchState, getSlideIndex) and events (hashChange, hashSet), replacing previous loose typing. The styling has been consolidated into a new hash-navigation.css file, removing legacy LESS/SCSS dependencies. Functionally, the module now uses a getParams() helper for safer parameter access and maintains existing behavior for URL hash synchronization, including support for virtual slides and history API integration.

src/modules/hash-navigation · high confidence

The history module has been migrated from JavaScript/LESS to TypeScript and CSS, introducing explicit type definitions for \HistoryOptions\, \HistoryMethods\, and \HistoryEvents\. This change adds strict typing to the module's public API, including the \history\ configuration object (with options like \enabled\, \root\, \replaceState\, \key\, and \keepQuery\) and augments the core \Swiper\ and \SwiperOptions\ interfaces to include history-specific methods and events. The underlying logic for managing browser history state (push/replace state) and URL parsing remains functionally equivalent but is now type-safe.

src/modules/history, src/modules/keyboard · high confidence

The \src/modules/manipulation\ module has been migrated from JavaScript to TypeScript, introducing strict type definitions for \ManipulationOptions\, \ManipulationMethods\, and \ManipulationEvents\. The implementation of slide manipulation methods (\appendSlide\, \prependSlide\, \addSlide\, \removeSlide\, \removeAllSlides\) now explicitly manages loop state by calling \loopDestroy()\ and \loopCreate()\ when slides are added or removed in a loop configuration, ensuring the slider's internal index remains consistent. This change also includes the addition of an empty \manipulation.css\ file, replacing previous preprocessor styles.

src/modules/manipulation · high confidence

The shared utility module has been rewritten in TypeScript, introducing new helpers for class-to-selector conversion, shadow DOM management, and browser/device detection. A key behavioral adjustment is made to the elementOffset function, which now returns viewport-relative coordinates by subtracting clientTop/clientLeft, ensuring consistent positioning logic across different scroll contexts. Additionally, the extend() utility is hardened to correctly merge nested objects from different execution realms (such as iframes) and to ignore prototype property overrides.

src/shared · high confidence

The mousewheel module has been migrated from JavaScript to TypeScript, introducing strict type definitions for configuration and events. This change adds new configuration options including \forceToAxis\ to restrict scrolling to the active axis, \sensitivity\ to adjust scroll speed, \eventsTarget\ to specify which element handles wheel events, and \thresholdDelta\/\thresholdTime\ to control scroll triggering thresholds. The module now exposes a \mousewheel\ API on the Swiper instance with \enable()\ and \disable()\ methods, and emits a \scroll\ event during mousewheel interactions.

src/modules/mousewheel · high confidence

The navigation module has been migrated from JavaScript/LESS to TypeScript and CSS, introducing native support for SVG icons via the new \addIcons\ option (defaulting to true) and replacing hardcoded styles with CSS custom properties like \--swiper-navigation-size\ and \--swiper-navigation-color\. This change updates the visual rendering of prev/next buttons to use slotted or inline SVGs, adjusts button positioning logic for horizontal and vertical modes, and exposes stricter TypeScript types for navigation configuration and API methods.

src/modules/navigation · high confidence

The pagination module has been migrated from LESS/SCSS to standard CSS, introducing CSS custom properties (e.g., --swiper-pagination-bullet-size) to control styling, and the implementation is now written in TypeScript with strict typing. This change includes a behavioral fix for the progressbar and fraction pagination types: the total slide count is now correctly divided by grid rows, ensuring accurate progress indication in grid layouts. Additionally, shared logic for calculating slide lengths has been extracted into a grid-aware helper to support these calculations.

src/modules/pagination · high confidence

The React playground has been rebuilt using Vite instead of Webpack and updated to use React 18 (via createRoot). The demo application now imports Swiper modules explicitly and renders a slider with navigation, pagination, scrollbar, and mousewheel support, providing a modern, faster development experience for testing Swiper in React.

playground/react · high confidence

The build scripts have been completely restructured to use native ES modules (\.mjs\) and a new modular pipeline. The build now generates individual \.mjs\ files for each Swiper module (e.g., \navigation\, \pagination\) alongside the core and bundle, allowing for more granular tree-shaking. It also introduces a post-processing step (\fix-dts-extensions\) that automatically appends \.js\ extensions to relative specifiers in TypeScript declaration files, ensuring compatibility with Node 16/NodeNext resolution strategies. Additionally, the build now supports custom module selection via the \SWIPER\_BUILD\_MODULES\ environment variable and includes a new script to dynamically generate sponsor tables from an external JSON source.

scripts · high confidence

The shared component utilities have been restructured to improve how Swiper instances are initialized and updated. New modules in src/components-shared now centralize parameter parsing (get-params, get-element-params), change detection (get-changed-params), and mounting (mount-swiper). This refactoring introduces stricter handling for boolean configuration flags, ensuring that navigation, pagination, and scrollbar modules are correctly initialized or destroyed when their corresponding parameters change from true/false to object configurations or vice versa. It also adds support for detecting changes in nested object parameters and ensures that element references for navigation and pagination are properly bound during the mount phase.

src/components-shared · high confidence

The build system in scripts/utils has been completely rewritten to use native ES modules (.mjs) and a new set of utility functions. CSS processing now relies on PostCSS with autoprefixer and cssnano for minification, replacing previous LESS/SCSS support. New utilities handle banner generation, source map creation via Terser, and specific CSS transformations for element styles (including slotted selectors and slide splitting). The output directory is now explicitly set to 'dist'.

scripts/utils · high confidence

The scrollbar module has been migrated from LESS/SCSS to standard CSS and from JavaScript to TypeScript. This change introduces native CSS custom properties (such as --swiper-scrollbar-bg-color and --swiper-scrollbar-size) for styling, replacing the previous preprocessor-based styles, and provides full TypeScript type definitions for scrollbar options, methods, and events to improve developer experience and type safety.

src/modules/scrollbar · high confidence

Swiper has been rewritten in TypeScript (v14), replacing the previous JavaScript codebase and the \ssr-window\ dependency with inline environment guards. This change results in smaller minified bundles, stricter TypeScript types that are now emitted directly from the source, and a raised browser baseline targeting Chrome/Edge 110+, Safari 16.4+, and Firefox 110+. The build system no longer uses Babel, and the package now requires Node.js \>= 20.19.0 for development.

(repo-wide) · high confidence

The virtual module has been migrated from JavaScript to TypeScript, introducing strict type definitions for virtual slide data, options, and methods. This change includes the addition of a dedicated CSS file for virtual slides, replacing previous preprocessor styles, and implements fixes for rendering the first slide on initial updates and guarding against instantiation errors in non-DOM (SSR) environments.

src/modules/virtual · high confidence

The Vue playground has been rebuilt using Vite instead of the previous build tooling, featuring a new entry point and configuration that aliases the local Swiper distribution. This update introduces a demonstration of the new Vue-specific API where child components can access the parent Swiper instance and slide context via Vue's provide/inject mechanism, as shown in the new inner component example.

playground/vue · high confidence

The zoom module has been migrated from JavaScript to TypeScript, providing full type definitions for configuration options (such as maxRatio, minRatio, and panOnMouseMove) and public API methods (in, out, toggle). The module now includes dedicated CSS styles for the zoom container and zoomed state, replacing previous preprocessor styles. Additionally, a behavioral fix ensures that the first double-tap on an image correctly zooms to the specific tapped point rather than a default center.

src/modules/zoom · high confidence

Added SSR runtime smoke test for Swiper v14; Added consumer type-resolution tests to prevent v14 breaking changes; Added contract tests for Swiper distribution exports; Added real-DOM regression tests for Swiper web component and loop mode; Added regression tests for cross-realm parameter merging; Added static type tests for per-module augmentation pattern; Added type-augmentation contract tests for shipped declarations.

The Swiper package has been updated to version 14.2.0, introducing a strict requirement for Node.js version 20.19.0 or higher. This release modernizes the development environment by upgrading key build dependencies, including Rollup to 4.60.4, TypeScript to 6.0.3, and React to 19.2.6. It also replaces the previous linter with oxfmt for code formatting and updates the CSS processing chain with cssnano 7.1.1 and autoprefixer 10.4.21. The package structure is configured as an ES module with explicit exports for core, bundle, and CSS entry points.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 40 → 45 (+5.1)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.16) — scores are not directly comparable.

• Code Health 53 → 44 (-9.8)
• Architecture 83 (new)
• Maturity 65 → 65 (+0.1)
• Readiness 19 → 34 (+14.6)
• Security 75 → 75 (+0.0)
• Accessibility 64 (new)
• Performance 60 (new)

• Boundary-crossing change coupling: pagination.ts ↔ scrollbar.ts (src/modules/pagination/pagination.ts)
• Change coupling: build.js ↔ watch.js (scripts/build.js)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Dimension evaluation failed
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• …and 44 more

• Boundary-crossing change coupling: effect-cube.ts ↔ effect-flip.ts (src/modules/effect-cube/effect-cube.ts)
• Boundary-crossing change coupling: params-list.ts ↔ options.ts (src/components-shared/params-list.ts)
• Change coupling: defaults.ts ↔ swiper-vue.d.ts (src/core/defaults.ts)
• Change coupling: params-list.ts ↔ swiper-vue.d.ts (src/components-shared/params-list.ts)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (the committed lockfile resolved no direct production dependency)
• Documentation: no installation or build instructions (README.md)
• Documentation: no project overview (README.md)
• FileTooLong: core/core.ts (src/core/core.ts)
• FileTooLong: zoom/zoom.ts (src/modules/zoom/zoom.ts)
• FunctionTooLong: a11y.A11y (src/modules/a11y/a11y.ts)
• FunctionTooLong: autoplay.Autoplay (src/modules/autoplay/autoplay.ts)
• FunctionTooLong: controller.Controller (src/modules/controller/controller.ts)
• FunctionTooLong: effect-creative.EffectCreative (src/modules/effect-creative/effect-creative.ts)
• FunctionTooLong: effect-cube.EffectCube (src/modules/effect-cube/effect-cube.ts)
• FunctionTooLong: free-mode.FreeMode (src/modules/free-mode/free-mode.ts)
• FunctionTooLong: grid.Grid (src/modules/grid/grid.ts)
• FunctionTooLong: history.History (src/modules/history/history.ts)
• FunctionTooLong: keyboard.Keyboard (src/modules/keyboard/keyboard.ts)
• …and 162 more

• 15 commits — 7 feature/other, 8 fixes

• src/core — 5 commits
• (root) — 4 commits
• src/modules — 3 commits
• (repo) — 1 commit
• scripts/release.js — 1 commit
• src/components-shared — 1 commit

• fix: Merge pull request #8212 from Jaybhade/fix/8053-rtl-translate-change-direction
• fix: fix(a11y): let Tab leave the carousel in loop mode
• fix: fix(cards): prevent invalid calc() transform with low perSlideOffset
• fix: fix(core): do not emit index-change events from loopFix teleports (#8015)
• fix: fix(core): drop per-image lazyPreload listeners, handle image error in delegated loader
• fix: fix(core): harden extend() against prototype-method override in key filtering
• fix: fix(core): recompute rtlTranslate in changeDirection (#8053)
• fix: fix(core): size loop buffer from actual offset width, not centeredSlides geometry (#8203)
• change: 14.2.0
• change: 14.2.0
• change: chore: sponsors
• change: chore: sponsors
• change: chore: sponsors
• change: feat(core): add lazyPreload param to disable built-in lazy image handling (#7570)
• change: feat(fade): add fadeEffect "mode" param with new "out-in" transition mode (#8051)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

nolimits4web/swiper was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.