How do class names change in version 7.0 of Swiper in Webflow?
TL;DR
- In Swiper 7.0,
.swiper-containeris now.swiper; other class names remain unchanged. - Update your Webflow custom code, CSS styles, and JavaScript selectors to reflect this change.
- Check for broken layouts, non-functional navigation, or console errors after updating.
1. Changes to Class Names in Swiper 7.0
In Swiper 7.0, several CSS class names have changed compared to previous versions. If you are using a custom Swiper setup in Webflow, you must update these class references to ensure your slider works correctly.
.swiper-container→.swiper(the main wrapper class).swiper-wrapper(remains unchanged).swiper-slide(remains unchanged).swiper-pagination(remains unchanged).swiper-button-next(unchanged, for navigation).swiper-button-prev(unchanged, for navigation).swiper-scrollbar(unchanged, for the scrollbar)
2. What to Update in Webflow
If you previously used .swiper-container, update it to .swiper in:
- Custom Code Embed Elements (if your Webflow site includes custom Swiper.js)
- CSS Styles (if you've applied custom styles to
.swiper-container) - JavaScript Selectors (ensure your scripts target
.swiperinstead)
3. Checking for Errors
After updating, check for:
- Broken layouts (slides not aligning properly)
- Non-functional navigation or pagination
- Console errors in Developer Tools indicating missing selectors
Summary
In Swiper 7.0, the primary class name change is from .swiper-container to .swiper. Other key class names remain the same. Update your Webflow custom code and styling accordingly to prevent conflicts.