How do class names change in version 7.0 of Swiper in Webflow?
TL;DR
- Update Swiper classes in your Webflow project by adding the
swiper-prefix to align with version 7.0's naming structure. - Review and modify custom code targeting Swiper classes, and test the project to ensure functionality remains intact.
In version 7.0 of Swiper, the class naming convention has been updated. Here's how to adapt to these changes in Webflow:
1. Understand the New Class Naming Structure
- With Swiper version 7.0, class names have switched to using the
swiper-prefix across all elements and components. - Previous versions might have used a variety of prefixes or un-prefixed class names.
2. Update Your Project’s Swiper Classes
- Identify any existing Swiper elements in your Webflow project that use older class names.
- Change these classes to the new naming convention by adding the
swiper-prefix to the relevant classes, e.g., changecontainertoswiper-container.
3. Modify Custom Code if Necessary
- If you have any custom code (such as JavaScript or CSS) targeting Swiper classes, review it carefully.
- Update selectors in custom CSS or JavaScript to align with the new class names, ensuring functionality remains intact.
4. Test Your Changes
- Preview your Webflow project to ensure that Swiper displays and functions as expected with the new class names.
- Test all interactive elements to confirm there are no disruptions.
Summary
Version 7.0 of Swiper mandates a consistent class naming structure using the swiper- prefix. Update your Webflow project classes and any related custom code to match this new convention, ensuring continued functionality.