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

In version 7.0 of Swiper in Webflow, the class names have undergone some changes. Previously, in Swiper version 6.5 and earlier, the class names followed a specific convention like `.swiper-container`, `.swiper-slide`, and `.swiper-button-next`, to name a few.

However, in version 7.0, Swiper has introduced a new CSS architecture called "Swiper CSS Custom Properties" (or SCCP for short) that brings more flexibility and customization options to the Swiper component.

With this new CSS architecture, the class names have changed and are now based on CSS Custom Properties instead of hard-coded class names. These CSS Custom Properties allow you to define your own class names and customize the Swiper component more easily.

Here's an overview of the new class naming conventions in Swiper 7.0:

1. `.swiper` - This is the main container class that wraps the Swiper component.

2. `.swiper__container` - This class is used to define the container of the slides.

3. `.swiper__slide` - This class is applied to each individual slide within the Swiper component.

4. `.swiper__pagination` - This class represents the pagination container.

5. `.swiper__pagination-bullet` - This class is used for each pagination bullet.

6. `.swiper__button-next` - This class is applied to the next button.

7. `.swiper__button-prev` - This class is applied to the previous button.

It's worth noting that you can still customize these class names by overriding the CSS Custom Properties in the Webflow Designer or by adding your own CSS styles to the component. This flexibility allows you to create unique styles and effects for your Swiper component.

Overall, the changes in Swiper 7.0 bring a more modular and customizable approach to styling the Swiper component in Webflow, offering greater control and design possibilities.