Add option for vertical slide center alignment

[silverbackdan]

Clear and concise description of the problem

Right now, if I want to vertically center my slides (e.g. for text content that may vary in height between slides), I need to do a bit of a hack because of the shadow root element methods used.

onMounted(() => {
  nextTick(async () => {
    const sheet = new CSSStyleSheet
    sheet.replaceSync(`.swiper-wrapper { align-items: center; }`)
    sc.value.shadowRoot.adoptedStyleSheets.push(sheet)
  })
})

This is because we are unable to simply specify classnames and apply classes when they are within a shadow root element.

Suggested solution

It seems that there are a few discussions about this over the years so I imagine it would be a very useful and hopefully quick fix to add an option for vertical centering, just like there is one for horizontal centering.

The option centeredSlides is not clear in the reference. It suggests slides will be centered, but it only appears to center horizontally.

To avoid a breaking change and applying align-items: center; to .slider-wrapper - how about we add a new option, vCenteredSlides which simply adds this css style? Otherwise I think it'd work fine. And I don't think it'd clash even if users select to apply dynamic height resizing between the slides.

Any thoughts?

I did see some issues which were just asking for help a long time ago and they were directed to Stack Overflow. But didn't spot any relating to this way of fixing the solution or the proposal of a new API option.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[nolimits4web]

You can use injectStyles parameter like so:

...
injectStyles: [`.swiper-wrapper { align-items: start }`],
...

https://swiperjs.com/element#injecting-styles

[silverbackdan]

Thank you, sorry for missing it and perhaps this issue will help others who come across this issue. Tidy fix.