Expose swiper state (isEnd / isBeginning) to host element for styling use cases

[testBP0612]

Hi, this is my first time opening an issue here, hope this is ok 🙏

I am using swiper-container (Web Components version), and I found it a bit hard to handle some UI cases that depend on swiper state.

Problem

For example, I have a simple "edge mask" (gradient overlay) on the right side.

• When user can still scroll → show mask
• When reach the end → hide mask

This seems like a pure visual thing, but currently I need to:

• listen to multiple events (slideChange, reachEnd, fromEdge, update...)
• sync swiper.isEnd into my own reactive state
• then control UI manually

Because:

• swiper.isEnd is not reactive
• and there is no state reflected on the host element

So I cannot do this with CSS only.

Why this is a bit painful

This kind of UI is quite common:

• edge fade mask
• gradient overlay
• show/hide arrows or hints

But now it requires JS event bridge, which feels a bit heavy for just styling.

Also, since navigation buttons are inside shadow DOM, I cannot use :has() or similar selectors.

Suggestion

Maybe swiper could expose some state on the host element, like:

Option 1: attributes

<swiper-container is-end="true" is-beginning="false" />

Option 2: classes

<swiper-container class="swiper-end swiper-beginning" />

Any of these would allow styling without JS.

Question

Is there any recommended way to handle this case now?

Or would you consider exposing these states in the future?

Thanks!