How do class names change in version 7.0 of Swiper in Webflow?

In Swiper version 7.0, some default class names and required structures changed compared to earlier versions, impacting how Swiper is implemented visually and programmatically in Webflow.

1. New Default Swiper Class Names

• The main container must now use the swiper class (was previously swiper-container in earlier versions).
• The wrapping element for slides must now use swiper-wrapper (same as before).
• Each individual slide should use the swiper-slide class (same as before).

2. Key Class Name Changes from v6.x to v7

• swiper-container → swiper: This is the most noticeable breaking change. Swiper no longer uses swiper-container.
• All other essential classes like swiper-wrapper, swiper-slide, and navigational classes (swiper-button-prev, swiper-pagination, etc.) remain the same unless customized.

3. What This Means in Webflow

• If your project previously used the swiper-container class on the main Swiper div, update this class to swiper for Swiper to initialize correctly in version 7+.
• Make sure the structure matches the required layout:
• Main div with class swiper
• Child div with class swiper-wrapper
• Each slide with class swiper-slide

4. Other Updates in Swiper 7

• Swiper 7 introduces ES module support, tree-shaking capabilities, and a refactor of internal APIs, but most of these changes are relevant only if you're loading Swiper via custom code, not Webflow designer controls.
• If you’re using custom JavaScript with Swiper in Webflow, verify you're referencing the correct class names in query selectors.

Summary

To adapt to Swiper v7 in Webflow, replace swiper-container with swiper on your main slider element. The internal structure using swiper-wrapper and swiper-slide remains the same, but failing to update this primary class will prevent Swiper from loading properly.