Webflow sync, pageviews & more.
NEW

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

TL;DR
  • In Swiper 7.0, .swiper-container is 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 .swiper instead)

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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I add in-line text links without breaking the line in Webflow?
Why does Webflow show a "failed to upload background video" error message and how can I resolve it?
How can I edit specific classes that I have created in Webflow? I am unable to locate the option box mentioned in an old response from 2014, and I do not see it to the right of the classes text field. The only dropdowns I see are for renaming or duplicating a class and selecting pseudo-classes. Here are screenshots for reference: [Include screenshots here]
How can I convert a text into an email link in Webflow? I have tried enabling the link element and entering my email address in the email field, but when I click the link, it only opens a new empty tab named 'Untitled'. Please help me resolve this.
Is there a built-in feature in Webflow for setting up ticket sales on a client's site for their events, or would I need to use a third-party tool like Eventbrite?
Why aren't my blog pages being indexed by Webflow?
Need assistance with Webflow's Finsweet filter. The search field and filtering number are functional, but the checkbox filter is not working. Urgently seeking help with this issue.
How does Webflow charge their 2% transaction fee for ecommerce?
How can I create a simple floating animation using images as floating objects in Webflow?
How can I embed a video from Dropbox on my Webflow site and ensure it works in Firefox and Safari?
Is it possible to have a user account in Webflow where customers can view their past orders and tracking information for physical goods?
Can I hide elements on different screen sizes in Webflow?
Can I code something in Webflow to set up 5 separate Slick Sliders with the same settings?
How can I show ellipsis (...) when text is cut off in a Webflow textbox due to the size of the block? Can anyone provide the necessary code or solution? Thank you!
How to resolve slight blurriness in images on a Webflow published website?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?