nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Home Page:https://swiperjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Direction vertical, web components and it's fix

mirsella opened this issue · comments

Clear and concise description of the problem

hello

as discussed in
#6761
#2378
#3691

direction vertical mode doesn't work well out of the box.
if using the core api with just div and class, we can simply set the max height.
but with the web component method, the element is hidden.

following the other issue on vertical mode, it would be great to have a simpler way of setting the max height to fix the vertical mode.

my current fix

  swiperEl.initialize();
  document
    .querySelector("swiper-container")
    .shadowRoot.querySelector(".swiper").style.maxHeight = "40vh";

Thanks, have a great day

Suggested solution

maybe we can have a attribute or some js to do it automatically. or maybe just a documentation about it, because currently new user have to find and read multiples github issues, with different fixes, for different modes (core, element, react, etc) and different version with breaking changes.

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

i've used injectStyles: [".swiper {max-height: 40vh;}"], in the params now, didn't see it before but i guess it will suffice.
this issue will serve for future reference