[Snyk] Security upgrade swiper from 8.4.5 to 12.1.2

[snyk-io]

Snyk has created this PR to fix 1 vulnerabilities in the npm dependencies of this project.

Snyk changed the following file(s):

• React/package.json
• React/package-lock.json

Vulnerabilities that will be fixed with an upgrade:

	Issue	Score
	Prototype Pollution SNYK-JS-SWIPER-15322690	317

Breaking Change Risk

Notice: This assessment is enhanced by AI.

---

Important

• Check the changes in this PR to ensure they won't cause issues with your project.
• Max score is 1000. Note that the real score may have changed since the PR was raised.
• This PR was automatically created by Snyk using the credentials of a real user.

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open fix PRs.

For more information:
🧐 View latest project report
📜 Customise PR templates
🛠 Adjust project settings
📚 Read about Snyk's upgrade logic

---

Learn how to fix vulnerabilities with free interactive lessons:

🦉 Prototype Pollution

[snyk-io]

This is a major upgrade from version 8.4.5 to 12.1.2, spanning four major versions (v9, v10, v11, v12). It introduces numerous significant breaking changes that will require substantial code refactoring, styling adjustments, and a thorough review of your implementation.

Key Breaking Changes:

• Styling (v12): Support for .scss and .less files has been completely removed. All styling must be migrated to use the new CSS files and theming should be done via CSS Custom Properties. Navigation icons have also been changed from an icon font to SVGs.

• Module Imports (v10): The way modules are imported has changed. For example, Navigation and Pagination must now be imported from swiper/modules instead of the root swiper package.

  • Before: import { Navigation } from 'swiper';
  • After: import { Navigation } from 'swiper/modules';

• Framework Components (v9): The dedicated Swiper Angular, Swiper Solid, and Swiper Svelte components have been removed. The official recommendation is to migrate to Swiper Elements (Web Components).

• API and Module Reworks (v9, v11):

  • Loop Mode: The loop functionality was significantly reworked in v9 and again in v11. The loopedSlides parameter was removed in v11 and replaced with loopAdditionalSlides.
  • Event System: v9 removed touch events in favor of pointer events, though some touch event support was re-introduced in v11 to fix bugs. For Swiper Elements, all events are now prefixed with swiper (e.g., swiperslidechange) as of v11.
  • Dom7 Removed: The internal Dom7 library was removed in v9. Any code relying on swiper.$ for DOM manipulation must be updated to use standard JavaScript.

Sources:

• Swiper 9 Migration Guide
• Swiper 10 Migration Guide
• Swiper 11 Migration Guide
• Swiper 12 Release Blog

Recommendation: This upgrade cannot be performed as a simple version bump. It requires a dedicated effort to migrate your implementation. Developers must carefully follow the official migration guides for each major version, refactor module imports, update all styling to use the new CSS-based system, and validate the behavior of features like loop and autoplay.

Notice 🤖: This content was augmented using artificial intelligence. AI-generated content may contain errors and should be reviewed for accuracy before use.